javascript - 单击相应的 "item"时编辑 "btn"的 css

Question

所以我有这个

<div class="btns">
    <div class="btn1"></div>
    <div class="btn2"></div>
    <div class="btn3"></div>
    <div class="btn4"></div>
</div>

<div class="prevs">
    <div class="pre1"></div>
    <div class="pre2"></div>
    <div class="pre3"></div>
    <div class="pre4"></div>
</div>

http://jsfiddle.net/uzpxjukv/

你有 btn1、btn2、btn3 和 btn4。我试图做到这一点，以便当您按下 btn1 时，带有 pre1 类的 div 应该得到“显示: block ；”或使其可见的东西。然后当点击 btn2 时，pre1 再次变为不可见，pre2 变为可见。

Answer 1

也许是这样的？如果有更多的按钮，应该更优化。

$('.btns').find('div').click(function(){
    $('.prevs').find('div').eq($(this).index()).toggle();
});

$('.btns').find('div').click(function(){
        $('.prevs').find('div').eq($(this).index()).toggle();
    });

.prevs div:not(.pre1) {
  display:none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
    <div class="btn1">Button 1</div>
    <div class="btn2">Button 2</div>
    <div class="btn3">Button 3</div>
    <div class="btn4">Button 4</div>
</div>

<div class="prevs">
    <div class="pre1">Previews 1</div>
    <div class="pre2">Previews 2</div>
    <div class="pre3">Previews 3</div>
    <div class="pre4">Previews 4</div>
</div>