按按钮显示/隐藏 div答案

【问题标题】：Show/hide div by button按按钮显示/隐藏 div
【发布时间】：2016-01-12 06:51:39
【问题描述】：

我试图根据选择的按钮按 id 显示/隐藏特定的 div，但是当显示正确的内容时，页面的其余部分被隐藏。我希望这些按钮保持显示状态，而只有类名为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>

【问题讨论】：

请查看jsfiddle.net/hccnjc10/3

标签： jquery show-hide

【解决方案1】：

你应该选择特定的兄弟姐妹。

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

DEMO

【讨论】：

【解决方案2】：

试试这个。

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

          });
</script>

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

   $(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

【讨论】：

我喜欢积极的想法 :)

【解决方案3】：

你可以试试这样的：

$(".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>

【讨论】：

【解决方案4】：

查看我的DEMO

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

          });

【讨论】：