Разделительные заголовки таблеток, не удаляющие активное состояние

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