你的位置:首页 > Java教程

[Java教程]jquery/js特效代码总结(一):tab切换


jquery实现tab切换

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>

 

下面的代码就是具体实现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();  })  }

 

jquery调用函数代码如下:

$(function(){  tabs($("#tabs01 a"), $('#container01 .con')); })

当然用这种调用方法实现还是比较方便的。

当然有js实现tab切换:

首先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>

方法一:

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(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,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>

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>

注意这种方法不能去掉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; }

js代码:

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");

 

 

作者:风雨后见彩虹

出处:http://www.cnblogs.com/moqiutao/

如果您觉得本文对您的学习有所帮助,请多支持与鼓励。