javascript - 在元素单击时将 css 样式添加到 2 个列表的元素

Question

我有 2 个元素列表。当我单击第一个列表的元素(它是一个链接)时，我基本上需要将 css 类“is-active”添加到该元素以及另一个列表中的相应元素。我认为它们必须位于单独的列表中，因为它们位于两个不同的引导列中以实现移动友好性。我目前正在为第一个列表中的元素设置样式:

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

但是无法从其他列表中选择元素。有什么想法可以使用 css、js/jquery 实现此功能吗？

目前我的html结构是这样的:

<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>

当我单击第一列中的第二个链接时，第二列中的第二个 div 应该获得“is-active”类。这可能吗？

我想列表现在没有相应的元素。我需要什么才能以某种方式链接这些元素？

Answer 1

这是一个示例，因为我们不知道您的列表是什么样的。

<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>

此外，删除 is-active 类的所有实例然后将其仅添加到目标元素会更容易。

$(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/