CSS stilini elemandaki 2 listenin elemanlarına ekle

Question

'a tıklayın 2 eleman listesi var. İlk listenin bir öğesini tıklattığımda (bu bir bağlantıdır) temel olarak css sınıfının 'etkin' olduğunu o öğeye VE başka bir listeden karşılık gelen öğeye eklemem gerekir. Mobil uyumluluk için iki farklı bootstrap sütununda oldukları için ayrı listelerde olmaları gerektiğini düşünüyorum.

$(document).ready(function(){ 
    $('.tabs li').click(function(){ 
     $(this).addClass('is-active'); 
     $('.tabs li').not(this).removeClass('is-active'); 
    }); 
}) 

olsa diğer listeden elemanlarını seçilemiyor

.. herhangi bir fikir nasıl, js/jquery css ile bu işlevselliği elde edebilirsiniz: Şu anda ilk listeden elemanları stil ben?

Benim html yapısı şu anda şu şekildedir:

<div class="col-md-6"> 
    <ul class="tabs"> 
     <li class="tabs-title is-active"> 
      <a href="#">title_1</a> 
     </li> 
     <li class="tabs-title"> 
      <a href="#">title_2</a> 
     </li> 
    </ul> 
</div> 
<div class="col-md-6"> 
    <div class="tabs-content"> 
     <div class="tabs-panel is-active"> 
      <div class="entry"> 
       <p>content_1</p> 
      </div> 
     </div> 
     <div class="tabs-panel"> 
      <div class="entry"> 
       <p>content_2</p> 
      </div> 
     </div> 
    </div> 
</div> 

Ben ilk kolondan 2 linkine tıkladığınızda, almalısınız ikinci sütundan 2 div 'dir aktif' sınıfı. Mümkün mü?

Listeler şu anda karşılık gelen öğelere sahip değil. Bir şekilde bağlantılı öğelere sahip olmak için neye ihtiyacım var?

Answer 1

İşte bir örnek, listeniz neye benzediğini bilmiyoruz.

<ul class="tabs"> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
</ul> 

<ul class="letters"> 
    <li>item a</li> 
    <li>item b</li> 
    <li>item c</li> 
</ul> 

Ayrıca, is-active sınıfın tüm örneklerini kaldırmak ve sonra sadece hedef elemanları eklemek daha kolaydır.

$(document).ready(function(){ 
    $('.tabs li').click(function(){ 
    var index = $('.tabs li').index(this); 

    $('.tabs li, .letters li').removeClass('is-active'); 

    $(this).addClass('is-active'); 
    $('.letters li').each(function(i) { 
     if (i == index) 
     $(this).addClass('is-active'); 
    }) 
    }); 
}) 

https://jsfiddle.net/fzeauw7a/