Show/hide div 按按钮

Question

我正在尝试根据选择的按钮 show/hide 通过 id div，但是当显示正确的内容时，页面的其余部分被隐藏。我希望按钮保持显示状态，而只有 class 名称为 material 的 divs 根据选择的按钮被隐藏或显示。解决这个问题的可能方法是什么？

代码

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

你应该 select 特定的兄弟姐妹。

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

DEMO

Answer 2

您可以尝试这样的操作：

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

诀窍是拆分隐藏和显示的过程。据我所知，这使代码易于阅读和理解。

代码

JSFiddle

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

// This function can be used to reset states of all elements
function hideAllSiblings() {
  $(".material").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 3

试试这个。

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

          });
</script>

除了该答案之外，您还可以在每个活动元素上添加 active class。

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

    $(this).siblings('.bob').removeClass("active")

  });
});

见Demo

Answer 4

看看我的DEMO

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

          });

Show/hide div 按按钮

Show/hide div by button

jquery

show-hide

代码

代码