tab
jquery代码如下：
html代码：
<ul class="tabs" id="tabs01">
<li><a href="javascript:void(0)" class="current">tab切换一</a></li>
<li><a href="javascript:void(0)">tab切换二</a></li>
<li><a href="javascript:void(0)">tab切换三</a></li>
</ul>
<div class="container" id="container01">
<div class="con">显示内容一</div>
<div class="con">显示内容二</div>
<div class="con">显示内容三</div>
</div> ####jquery代码如下：
$(function(){ tabs($("#tabs01 a"), $('#container01 .con')); })
下面的代码就是具体实现tabs的函数：
var tabs = function(tab, con){
tab.click(function(){
var indx = tab.index(this);
tab.removeClass('current');
$(this).addClass('current');
con.hide();
con.eq(indx).show();
})
}
下面js方法：css代码：(公用)
<style type="text/css"> .wrapper {
width: 600px;
height: auto;
margin: 0 auto;
}
p {
margin: 0;
padding: 0;
color: #333333;
font-family: 宋体;
font-size: 12px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 500px;
height: 16px;
border-bottom: #DDDDDD solid 1px;
}
li {
margin: 0;
padding: 0;
height: 16px;
padding-left: 5px;
padding-right: 10px;
float: left;
border-left: #FFFFFF solid 1px;
border-right: #808080 solid 1px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #000000;
background-color: #F4F4F4;
cursor: pointer;
}
.one {
width: 500px;
padding-top: 20px;
display: none;
}
.blue {
color: #58A200;
background-color: #8C5C5C;
}
.white {
color: #000000;
background-color: #F4F4F4;
}
</style>
js方法：
####JS:方法一：
<script type="text/javascript">
function showTab(num) {
for (i = 0; i < 3; i++) {
document.getElementById("tab" + i).style.display = "none";
document.getElementById("id" + i).className = "white";
}
document.getElementById("tab" + num).style.display = "block";
document.getElementById("id" + num).className = "blue";
}
</script>
在这里先把tab0, tab1, tab2都设置成display:none, class属性为white, 然后再根据所传参数来设置成display:block, class为blue方法一的HTML:
<div class="wrapper">
<ul>
<li id="id0" onclick="showTab(0)" class="blue">Javascript</li>
<li id="id1" onclick="showTab(1)">Action Script</li>
<li id="id2" onclick="showTab(2)">Photoshop</li>
</ul>
<div class="one" id="tab0" style="display:block">
<p> </p>
</div>
<div class="one" id="tab1">
<p></p>
</div>
<div class="one" id="tab2">
<p></p>
</div>
</div>
**JS:方法二：
<script type="text/javascript">
function showTab(i, j) {
var x;
var y;
var l, m;
for (l = 0; l < 3; l++) {
x = document.getElementById("id" + l);
if (i == l) {
x.className = "blue";
} else {
x.className = "white";
}
}
for (m = 0; m < 3; m++) {
y = document.getElementById("tab" + m);
if (j == m) {
y.style.display = "block";
} else {
y.style.display = "none";
}
}
}
</script>
方法二的HTML代码：
<div class="wrapper">
<ul>
<li id="id0" onclick="showTab(0,0)" class="blue">Javascript</li>
<li id="id1" onclick="showTab(1,1)">Action Script</li>
<li id="id2" onclick="showTab(2,2)">Photoshop</li>
</ul>
<div class="one" id="tab0" style="display:block">
<p></p>
</div>
<div class="two" id="tab1" style="display:none">
<p></p>
</div>
<div class="three" id="tab2" style="display:none">
<p></p>
</div>
</div>
- 注意这种方法不能去掉l,m, 直接写成for (i=0; i<3; i++), for (j=0; j<3; j++)因为i原本是函数的参数，它的值是外面传进来的，如果将for (l=0; l<3; l++)换成for (i=0; i<3; i++)的话，i就被重新赋值了，showTab(0,0)、showTab(1,1)、showTab(1,2)括号里无论传任何值都没有区别了
方法三：html代码如下：
<div class="wrap">
<ul id="tag">
<li class="current">标签一</li>
<li>标签二</li>
<li>标签三</li>
</ul>
<div id="tagContent">
<div> 内容一
<br>内容一 </div>
<div> 内容二
<br>内容二 </div>
<div> 内容三
<br>内容三 </div>
</div>
</div>
css代码：
*{margin:0;padding:0;}
.wrap{width:500px; margin:10px auto; }
#tag{ width:498px; overflow:hidden; background:#000; border:1px solid #000; }
#tag li{list-style:none; float:left; margin-right:0px; color:white; padding:5px 20px; cursor:pointer;}
#tag .current{ color:#000; background:#ccc; }
#tagContent div{ width:498px; border:1px solid #000; border-top:none; height:300px; display:none; }
function tabs(title,content){
var tag=document.getElementById(title).children; //获取Tag下的li，即Tag标签
var content=document.getElementById(content).children; //获取Tag标签对应的内容
content[0].style.display = "block"; //默认显示第一个标签的内容
var len= tag.length;
for(var i=0; i<len; i++) //无论点击谁都能实现当前显示，其余隐藏
{
tag[i].number=i;
tag[i].onclick = function() //0级DOM的事件句柄注册
{
for(var n=0; n<len; n++)
{
tag[n].className="";
content[n].style.display="none";
} //首先将全部的div隐藏
tag[this.number].className = "current";
content[this.number].style.display = "block";
}
}
};
tabs("tag","tagContent");//你想实现tab切换的某一个实例。
上面用到了chidren，可以用childNodes来实现该方法，但是要去除里面空白节点。代码如下：（加黑处就是去除空白节点）
function tabs(title,content){
var tag=document.getElementById(title).childNodes;
console.log(tag.length);// 打印结果为7
for(var i=0;i<tag.length;i++){
if(tag[i].nodeType==3&&/\s/.test(tag[i].nodeValue)){
tag[i].parentNode.removeChild(tag[i]);
}
}
console.log(tag.length);// 打印结果为3
var content=document.getElementById(content).childNodes;
console.log(content.length);// 打印结果为7
for(var i=0;i<content.length;i++){
if(content[i].nodeType==3&&/\s/.test(content[i].nodeValue)){
content[i].parentNode.removeChild(content[i]);
}
}
console.log(content.length);// 打印结果为3
content[0].style.display = "block"; //默认显示第一个标签的内容
var len= tag.length;
for(var i=0; i<len; i++) //无论点击谁都能实现当前显示，其余隐藏
{
tag[i].number=i;
tag[i].onclick = function() //0级DOM的事件句柄注册
{
for(var n=0; n<len; n++)
{
tag[n].className="";
content[n].style.display="none";
} //首先将全部的div隐藏
//console.log(this.number);
tag[this.number].className = "current";
content[this.number].style.display = "block";
}
}
};
tabs("tag","tagContent");