[color=orange]
html部分 比较简单哈
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选项卡</title>
<link rel="stylesheet" media="all" type="text/css" href="inc/style.css" />
<script type="text/javascript" src="inc/tab.js"></script>
</head>
<body>
<div id="first">
<div class="on" title="tab1">tab1</div>
<div class="off" title="tab2">tab2</div>
<div class="off" title="tab3">tab3</div>
<div class="off" title="tab4">tab4</div>
<div class="off" title="tab5">tab5</div>
</div>
<div class="show" id="tab1">
tab1的内容
</div>
<div class="hide" id="tab2">
tab2的内容
</div>
<div class="hide" id="tab3">
tab3的内容
</div>
<div class="hide" id="tab4">
tab4的内容
</div>
<div class="hide" id="tab5">
tab5的内容
</div>
</body>
</html>
需要注意的是下面的div的id值要和上面的5个div的title一直，这样子在js文件中可以进行一系列的操作
css内容
@CHARSET "UTF-8";
body {
background-color:#f3f3f3;
font-family:"Arial Narrow";
font-size:13px;
}
#first {
width:700px;
}
#first div.off {
margin-right:2px;
padding:0 20px;
height:33px;
background:url(tabs_0.gif) repeat-x bottom;
border:1px #ddd solid;
float:left;
cursor:pointer;
border-bottom-color:#000;
line-height:32px;
z-index:40;
position:relative;
}
#first div.on {
margin-right:2px;
padding:0 20px;
height:33px;
position:relative;
margin-top:1px;
background:url(tabs_2.gif) repeat-x bottom;
float:left;
cursor:pointer;
border:1px #000 solid;
border-bottom:0;
z-index:100;
line-height:33px;
}
div.hide {
width:0px;
display:none;
overflow:hidden;
}
div.show {
clear:left;
width:720px;
height:200px;
padding:20px;
top:-1px;
position:relative;
border:1px solid #000;
z-index:50;
}
.clear {
clear:both;
}
js代码 可以在js中添加Ajax的应用，即点击tab的时候从服务器端请求数据
//综合ajax的应用在tab中 通过tab的标签获得该标签下的要显示的内容
window.onload = function() {
var tab = document.getElementById("first");
var divs = tab.getElementsByTagName("div");
var responseContent;
for(var i = 0;i<divs.length;i = i+1) {
divs[i].onclick = function() {
//ajax的应用
// var text = this.innerHTML;
// var http = createXMLHttp();
// var url = "";
//true即为异步方式传输数据
// http.open("get",url,true);
// http.onreadystatechange = function() {
//表示传输完成
// if(http.readyState == 4) {
// responseContent = http.responseText;
// }
// }
if(this.className == "on") {
return false;
} else {
//得到状态为on的tab
var status = getStatus(divs);
var title = this.title;
this.className = "on";
document.getElementById(title).className = "show";
document.getElementById(status).className = "hide";
return true;
}
}
}
}
//这里有点复杂，是为了考虑到如果用Ajax来请求数据的话这样子比较好将内容嵌入到div中，暂时还没有找到别的好点的办法。
//找到状态为on的那个tab 将状态设置为off
function getStatus(divs) {
var tabId;
for(var i=0;i<divs.length;i=i+1) {
if(divs[i].className == 'on') {
divs[i].className = "off";
tabId = divs[i].title;
break;
} else {
continue;
}
}
return tabId;
}
//创建xmlhttp
function createXMLHttp() {
var request;
var browser = navigator.appName;
if(browser == "microsoft internet explorer") {
var versions = ["Microsoft.XMLHttp","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","MSXML2.XMLHttp.5.0"];
for(var i=0;i<versions.length;i++) {
try {
request = new ActiveXObject(versions[i]);
return request;
} catch(e) {}
}
} else {
request = new XMLHttpRequest();
return request;
}
}
[/color]
分享到：
相关推荐
`AveIcon.jpg`和`FlashCatcher.jpg`可能是用于Tab样式的图片资源，而`SWFDecompiler_icon.jpg`可能与解构Flash文件有关，但在这个JavaScript和CSS的Tab效果中并不直接相关。 总的来说，通过结合JavaScript的事件...
标题 "JavaScript + CSS 实现 Tab 效果" 涉及到的是网页开发中的常见交互设计，即Tab切换功能。这种效果允许用户通过点击不同的标签来显示或隐藏相关内容，提高用户体验，尤其在信息组织和展示时非常实用。下面将...
通过CSS的布局和样式设计，以及JavaScript的事件处理和状态管理，我们可以实现一个符合现代Web标准、具有良好用户体验的Tab功能。这不仅是提升网站界面易用性的重要手段，也是前端开发者必备的技能之一。
在本教程中，我们将深入探讨如何使用JavaScript和CSS来实现一个经典的Tab切换效果。这个效果在Web开发中非常常见，可以用于展示多个内容面板，让用户通过点击不同的Tab按钮来切换显示的内容。首先，我们来看看...
在网页设计中，"js控制层和DIV+CSS实现TAB菜单"是一个常见的技术组合，用于创建交互式的用户界面。这个主题涉及到JavaScript（JS）、层（Layer）管理、Div（CSS布局元素）以及CSS（级联样式表）的使用。下面我们将...
1. **基础Tab样式** 创建基础的Tab选项卡，我们需要HTML结构和CSS样式。HTML通常包含一个容器元素和一系列的标签页与内容区域。每个标签页和对应的内容都应有唯一的ID，以便于CSS选择器进行关联。 2. **纯CSS实现*...
纯CSS实现的Tab标签切换可以提供更加高效、简洁的交互体验，而无需依赖JavaScript等编程语言。本项目名为“纯css半圆角tab标签切换代码”，它包含了六个HTML文件，每个文件代表一种不同的Tab状态或布局，用于实现...
总结来说，纯CSS3实现的Tab标签切换效果利用了CSS3的新特性，如选择器、Flexbox布局、过渡和伪类，为用户提供了一种直观且交互性强的界面体验。通过掌握这些技巧，开发者可以在不依赖JavaScript的情况下创建出响应式...
下面我们将深入探讨`div+css`以及如何实现`tab`样式的相关知识。 一、`div`元素 `div`（division）是HTML中的一个块级元素，常用来作为容器，对网页内容进行分组。它可以包含文本、图像、链接等其他HTML元素，通过...
5. **Tab样式设计**： - Tab的样式可以多样化，包括扁平化设计、3D效果、圆角、渐变色、图标组合等，这些都是通过CSS实现的。 - Tab可以是水平的，也可以是垂直的，甚至可以设计成不规则形状，满足不同设计需求。 ...
CSS3（层叠样式表第三版）的引入，为实现这种功能提供了更为强大且灵活的工具。本篇文章将详细探讨如何使用CSS3来创建具有优秀视觉效果和交互体验的Tab多页签代码。 首先，我们需要理解Tab页签的基本结构。一个典型...
2. **JS**：JavaScript，通常与CSS结合使用，用于处理用户交互，如点击事件，以及控制内容的显示和隐藏，实现Tab的切换逻辑。 3. **tab**：Tab组件，是网页设计中的一种常见元素，通常由一组可点击的标签和与其关联...
很好的tab样式，通过a标签来画线实现tab效果
以上就是使用JavaScript和CSS实现Tab菜单的基本步骤。在这个过程中，我们需要注意浏览器兼容性问题，可能需要引入如jQuery这样的库来简化DOM操作，或者使用CSS3特性并配合polyfill来确保在旧版浏览器中的正常运行。...
本教程将详细讲解如何利用CSS实现一个功能完善的tab栏切换效果，这是一种常见的用户界面设计元素，常用于展示分组信息并允许用户在这些组之间轻松切换。 首先，我们要理解基本的HTML结构。一个简单的tab栏系统通常...
在这个例子中，我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先，我们来看 CSS 部分。CSS 用于设置页面的样式和布局。在示例代码中，`*.box` 是包含整个 Tab 控件的容器，设置了宽度和边框。`*.tab_...
CSS主要用于样式化Tab按钮和内容区域，以及实现点击按钮时的内容切换效果。我们可以使用伪类`:hover`, `:focus`来增加Tab按钮的交互感，同时利用CSS的`display`属性来控制内容区域的显示和隐藏。 以下是一个简单的...
通过调整CSS样式和增强JavaScript逻辑，可以创建更加复杂和个性化的Tab菜单。在实际项目中，还可以考虑响应式设计，确保Tab菜单在不同设备上都能良好地展示和交互。对于更高级的Tab菜单实现，例如动画过渡、动态加载...
这只是前端开发中的一种常见应用，随着技术的发展，还有更多的交互效果和复杂功能等待开发者去探索和实现。希望这个教程能帮助你理解和提升在`DIV+CSS+JavaScript`方面的技能，继续在web开发领域深入学习。