Question

我有2个元素列表。当我点击第一个列表的元素（它是一个链接）时，我基本上需要添加css类＆＃39; is-active＆＃39;到该元素和另一个列表中的相应项目。我认为它们必须位于不同的列表中，因为它们位于两个不同的引导列中，以实现移动友好性。我目前正在使用第一个列表中的样式元素：

$(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应该是“活跃的”＃39;类。这可能吗？

我猜列表现在没有相应的元素。如何以某种方式链接项目需要什么？

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/

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

1 个答案: