jquery实现点击页签 当前页签选中状态

看到很多网友在搜索类似“JS实现选项卡选中效果”,久久经验网站长写了个JS方法,供网友们使用

 选项卡html结构大致如下

  1. <div id="tabBox"> 
  2.  
  3.     <div id="tabBox_nav"> 
  4.         <a href="javascript:;">选项卡一</a> 
  5.         <a href="javascript:;">选项卡二</a> 
  6.         <a href="javascript:;">选项卡三</a> 
  7.     </div> 
  8.  
  9.     <div class="tabBox_content"> 
  10.       选项卡一的内容 
  11.     </div> 
  12.     <div class="tabBox_content"> 
  13.       选项卡二的内容 
  14.     </div> 
  15.     <div class="tabBox_content"> 
  16.       选项卡三的内容 
  17.     </div> 
  18.  
  19. </div> 

 

JS选项卡实现方法

  1. //选项卡方法 
  2. function tabFn(node,node2,node3){//node参数:选项点击对象,选项对应的内容,父容器 
  3.     $(node3).find(node).click(function(){ 
  4.          $this = $(this); 
  5.          var index = $this.index();        
  6.          $(this).addClass("curr").siblings().removeClass("curr"); 
  7.          $(node3).find(node2).hide(); 
  8.          $(node3).find(node2).eq(index).show(); 
  9.     }) 
  10.      
  11.  
  12.  
  13. //调用方法 
  14. tabFn("#tabBox_nav a",".tabBox_content","#tabBox");//调用选项卡方法 

搞定!

 

补充说明

“curr”为当前页签/选项卡选中效果的css类名,可以根据需要自行定义样式。

在运用到实际项目的时候,要将所有选项卡对应的选项卡内容一次性全部从数据库里读出来。

如果通过ajax动态读取数据,那么此方法不适用,需要改造JS方法!

默认隐藏除第一个选项卡内容容器外的其它选项卡的内容容器,即第一个容器:tabBox_content显示,同辈的其它容器隐藏。

如果有不清楚的地方,欢迎在文章底部留言给我!

 

 

 

相关经验

导读书签
书签初始化中…