jquery - 通过按钮显示/隐藏 div

Question

我试图根据选择的按钮按 id 显示/隐藏特定的 div，但是在显示正确的内容时，页面的其余部分被隐藏。我希望按钮保持显示状态，而只有类名为 material 的 div 会根据选择的按钮隐藏或显示。有什么可能的方法来解决这个问题？

代码

JSFiddle .

$(document).ready(function() {
  $(".bob").click(function() {
    var divname = this.value;
    $("#material" + divname).show().siblings().hide();
  });

});

.material {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="type1" class="type">
  <h3>1.2 Select material v1</h3>
  <button class="bob" type="button" name="material" value="1">tiles 1</button>
  <button class="bob" type="button" name="material" value="2">tiles 2</button>
  <button class="bob" type="button" name="material" value="3">tiles 3</button>
</div>
<div id="material1" class="material">
  1
</div>
<div id="material2" class="material">
  2
</div>
<div id="material3" class="material">
  3
</div>

Answer 1

您应该选择特定的 sibling 。

 $("#material"+divname).show().siblings('.material').hide();

DEMO