jquery/js特效代码总结（一）：tab切换
jquery实现tab切换：
html代码：
<ulclass="tabs"id="tabs01"><li><ahref="javascript:void(0)"class="current">tab切换一</a></li><li><ahref="Javascript:void(0)">tab切换二</a></li><li><ahref="javascript:void(0)">tab切换三</a></li></ul><divclass="container"id="container01"><divclass="con">显示内容一</div><divclass="con">显示内容二</div><divclass="con">显示内容三</div></div>
下面的代码就是具体实现tabs的函数：
vartabs =function(tab, con){
tab.click(function(){varindx = tab.index(this);
tab.removeClass('current');
$(this).addClass('current');
con.hide();
con.eq(indx).show();
})
}
jquery调用函数代码如下：
$(function(){
tabs($("#tabs01 a"), $('#container01 .con'));
})
当然用这种调用方法实现还是比较方便的。
当然有js实现tab切换：首先CSS公有代码：
<styletype="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>
方法一：html代码
<divclass="wrapper"><ul><liid="id0"onclick="showTab(0)"class="blue">Javascript</li><liid="id1"onclick="showTab(1)">Action Script</li><liid="id2"onclick="showTab(2)">photoshop</li></ul><divclass="one"id="tab0"style="display:block"><p></p></div><divclass="one"id="tab1"><p></p></div><divclass="one"id="tab2"><p></p></div></div>
js代码：
<script type="text/javascript">functionshowTab(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代码：
<divclass="wrapper"><ul><liid="id0"onclick="showTab(0,0)"class="blue">Javascript</li><liid="id1"onclick="showTab(1,1)">Action Script</li><liid="id2"onclick="showTab(2,2)">Photoshop</li></ul><divclass="one"id="tab0"style="display:block"><p></p></div><divclass="two"id="tab1"style="display:none"><p></p></div><divclass="three"id="tab2"style="display:none"><p></p></div></div>
js代码：
<script type="text/javascript">functionshowTab(i,j){varx;vary;varl,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>
注意这种方法不能去掉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代码如下：
<divclass="wrap"><ulid="tag"><liclass="current">标签一</li><li>标签二</li><li>标签三</li></ul><divid="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; }
js代码：
functiontabs(title,content){vartag=document.getElementById(title).children;//获取Tag下的li，即Tag标签varcontent=document.getElementById(content).children;//获取Tag标签对应的内容content[0].style.display = "block";//默认显示第一个标签的内容varlen=tag.length;for(vari=0; i<len; i++)//无论点击谁都能实现当前显示，其余隐藏{
tag[i].number=i;
tag[i].onclick=function()//0级DOM的事件句柄注册{for(varn=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来实现该方法，但是要去除里面空白节点。代码如下：functiontabs(title,content){vartag=document.getElementById(title).childNodes;
console.log(tag.length);//打印结果为7for(vari=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);//打印结果为3varcontent=document.getElementById(content).childNodes;
console.log(content.length);//打印结果为7for(vari=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);//打印结果为3content[0].style.display = "block";//默认显示第一个标签的内容varlen=tag.length;for(vari=0; i<len; i++)//无论点击谁都能实现当前显示，其余隐藏{
tag[i].number=i;
tag[i].onclick=function()//0级DOM的事件句柄注册{for(varn=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");