首页 > 代码库 > 利用jquery写的一个TAB页切换效果

利用jquery写的一个TAB页切换效果

2024-08-02 10:15:04   218人阅读

函数如下

 

 

[javascript] view plaincopy
 
  1. /** 
  2.  *切换效果 
  3.  */  
  4. function switab(tab,con,tab_c_css,tab_n_css,no) {  
  5.     $(tab).each(function(i){  
  6.         if(i == no)  
  7.         {  
  8.             $(this).addClass(tab_c_css);  
  9.         }else  
  10.         {  
  11.             $(this).removeClass(tab_c_css);  
  12.             $(this).addClass(tab_n_css);  
  13.         }  
  14.     })  
  15.     if (con)  
  16.     {  
  17.         $(con).each(function(i){  
  18.             if(i == no)  
  19.             {  
  20.                 $(this).show();  
  21.             }else  
  22.             {  
  23.                 $(this).hide();  
  24.             }  
  25.         })  
  26.     }  
  27. }  

 

 

使用前提条件：

加载jquery类

页面上有一个系列的切换的头和主体，如

tab头：
<div id="switab">
<li class="on" >标题1</li>

<li >标题2</li>

<li >标题3</li>

内容：

<div class="content" >主内容1</div>

<div class="content" >主内容2</div>

<div class="content" >主内容3</div>

</div>

然后面页面的加载事件，或直接在上面的li上面添加上点击事件：

页面加载事件方法：
$(document).ready(function(){
    $("#switab li").each(function(i){
        $(this).click(function(){
            switab(‘#switab li‘,‘.content‘,‘on‘,‘‘,i);        
        })
    })
})

如果直接在li添加点击事件就在上面的li写成如下：
<li class="on" onclick="switab(‘#switab li‘,‘.content‘,‘on‘,‘‘,0)">标题1</li>

<li onclick="switab(‘#switab li‘,‘.content‘,‘on‘,‘‘,1)">标题2</li>

<li onclick="switab(‘#switab li‘,‘.content‘,‘on‘,‘‘,2)">标题3</li>

但为了代码分离，建义使用前面的方法

switab函数参数介绍：
1.要切换的标题的批配条件，不要用ID，因为jquery用ID的话，找到的是一个对像，而不是对像数组，可以用name/class 或是父的过渡到子的，就像我例子上的／
2.主体内容批配的条件
3.标题为点中时的样式
4.标题为非选中状态时的样式
5.当前第几个，从0开始
由于用了jquery就不需要为标题／内容定义特殊的ID了，只要jquery能定位到这些就可以了。代码灵活性提高了，同时JS与HTML代码实现了完全分离！
另外如果以后要增加标签项，JS不用动，直接加就可以了。只要标题和内容相批配就行了  

利用jquery写的一个TAB页切换效果


联系
我们