Question

我试图根据选择的按钮显示/隐藏特定的div，但是在显示正确的内容时，页面的其余部分将被隐藏。我希望按钮保持显示，而只有divs类名为material的{{1}}隐藏或显示，具体取决于选择的按钮。有什么方法可以解决这个问题？

代码

＆＃13;

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

＆＃13;

.material {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

DEMO

Answer 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

Answer 3

您可以尝试这样的事情：

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

Trick是分开隐藏和显示的过程。根据我的理解，这使代码易于阅读和理解。

代码

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 4

查看我的DEMO

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

          });

按按钮显示/隐藏div

代码

4 个答案:

代码