Question

我有一个导航项列表，当点击一个导航项时，它的状态变为活动状态

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

我有一个容器div，里面有多个隐藏的div，并且基于活跃的li的顺序，我希望能够显示与li相同的隐藏div。

<div class="col-md-9">
    <div id="item1">
        <p>Section#1</p>
        <img src="image-plugin.jpg" class="img-responsive">
    </div>
    <div id="item2">
        <p>Section#2</p>
        <img src="image-plugin.jpg" class="img-responsive">
    </div>
    <div id="item3">
        <p>Section#3</p>
        <img src="image-plugin.jpg" class="img-responsive">
    </div>
</div>

所以基本上如果第二个li有活动类，那么我可以看到第二个隐藏的div。

理想情况下，一个不涉及将id附加到li的解决方案将是最好的，但我一直无法实现这一点，并希望得到任何可能的帮助。

Answer 1

看看at this demo bootply。对于这个HTML：

<div class="col-md-3">
  <ul class="list-group">
    <li class="list-group-item">Item 1</li>
    <li class="list-group-item">Item 2</li>
    <li class="list-group-item">Item 3</li>
  </ul>
</div>
<div class="col-md-9">
    <div id="item1" class="showhide hidden">
        <p>Section#1</p>
        <img src="http://www.placehold.it/350x150" class="img-responsive">
    </div>
    <div id="item2" class="showhide hidden">
        <p>Section#2</p>
        <img src="http://www.placehold.it/350x150" class="img-responsive">
    </div>
    <div id="item3" class="showhide hidden">
        <p>Section#3</p>
        <img src="http://www.placehold.it/350x150" class="img-responsive">
    </div>
</div>

这个JS：

$(document).ready(function() {
    $('li').click(function() {
        $('li').removeClass('active');
        $(this).addClass('active');    

      var index = $(this).index();
      $('.showhide').addClass('hidden').eq(index).removeClass('hidden');

    });
});

Answer 2

您可以使用index()方法并遵循有关点击事件的逻辑：

$(document).on("click", "li:not(.active)", function () {
    $('li.active').add(this).toggleClass('active');
    $('div[id^=item]').hide().eq($(this).index()).show();
});

-jsFiddle-

Answer 3

您可以使用index()来返回匹配元素的doInBackground。所以你可以写下一个方式：

order number - 1

如何根据另一个类更改元素的类

3 个答案:

-jsFiddle-