拆分选项卡标题不删除活动状态

Question

我想为我的网站使用jquery，css和html创建一个选项卡系统，我知道它工作时选项卡标题全部组合，但我想拆分它们，所以一些选项卡标题位于页面的一侧，其余位于相反的位置。这一切都看起来不错，当我点击标签标题的选项卡更改，但标题不删除前一个选项卡上的活动状态，这一定是因为我拆分它们。

的Jquery：

jQuery(document).ready(function() { 
      jQuery('.tabs .tab-links-left a').on('click', function(e) { 
       var currentAttrValue = jQuery(this).attr('href'); 

       // Show/Hide Tabs 
       jQuery('.tabs ' + currentAttrValue).show().siblings().hide(); 

       // Change/remove current tab to active 
       jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 

       //My added code 
       jQuery('.tabs .tab-links-right').siblings().removeClass('active'); 

       e.preventDefault(); 
      }); 
     }); 



     jQuery(document).ready(function() { 
      jQuery('.tabs .tab-links-right a').on('click', function(e) { 
       var currentAttrValue = jQuery(this).attr('href'); 

       // Show/Hide Tabs 
       jQuery('.tabs ' + currentAttrValue).show().siblings().hide(); 


       // Change/remove current tab to active 
       jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 

       //My added code 
       jQuery('.tabs .tab-links-left li').siblings().removeClass('active'); 

       e.preventDefault(); 
      }); 
     }); 

这里是报头中的HTML

   <ul class="tab-links-left" > 
        <li class="active"><a href="#tab1">Home</a></li> 
        <li><a href="#tab2">Gallery</a></li> 
        <li><a href="#tab3">Services</a></li> 


       </ul> 

       <ul class="tab-links-right" > 

        <li><a href="#tab4">Testimonials</a></li> 
        <li><a href="#tab5">Contact</a></li> 

       </ul> 

Answer 1

你的问题是，在另一侧的标签并不是

.siblings() 

的另一面。

我会建议你给所有选项卡一类

<li class="tab"> 

而且后来干脆点击标签时，以下几点：

jQuery('.tab').removeClass('active'); //Remove the active state from all tabs 
jQuery(this).parent('li').addClass('active'); //Add the active state to the clicked tab