Question

说我有这个带有几个div和几个按钮（或链接）的html文件。

我不希望同时出现多个div。我想，一旦你点击一个按钮/链接，显示的任何div都会消失，相应的div会在屏幕上替换它。

<button onclick="toggleByClass('1');">Toggle 1</button>
<button onclick="toggleByClass('2');">Toggle 2</button>
<button onclick="toggleByClass('3');">Toggle 3</button>

<div class="1">content1</div>
<div class="2">content2</div>
<div class="3">content3</div>

到目前为止，我只设法切换div，但这样可以同时显示多个。

Answer 1

的jQuery

你可以使用jQuery的toggle()函数，或只是调用show() / hide()函数，如果你只想显示/隐藏div，如果它们已经在你的html中，就像你的例子一样。

在新电话上调用hide()之前，请记住show()所有div，以便一次只能看到一个。

Css类

您可以使用的另一种方法是在您的css中定义一个.hidden类，并在想要隐藏该div时将其附加到classList。

.hidden { visible: none; }

但是，您可能需要使用ID而不是类来查询div，因为这可能会在动态更改class-attribute时导致问题。：）

Answer 2

我在Jquery尝试过。它可能对你有帮助

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
    $('.content_div').hide();
    $(document).on('click','.toggle_btn',function()
    {
        $('.content_div').hide();
        var div_to_show = $(this).attr('id');
        $('.'+div_to_show ).slideToggle();
    });
});
</script>
</head>

<body>
    <button class="toggle_btn" id="1">Toggle 1</button>
    <button class="toggle_btn" id="2">Toggle 2</button>
    <button class="toggle_btn" id="3">Toggle 3</button>

    <div class="1 content_div">content1</div>
    <div class="2 content_div">content2</div>
    <div class="3 content_div">content3</div>
 </body>

Answer 3

你可以从HTML开始清理一下：

<button >Toggle 1</button>
<button >Toggle 2</button>
<button >Toggle 3</button>

<div class="div">content1</div>
<div class="div">content2</div>
<div class="div">content3</div>

该类的重点是可重用的，因此，给所有元素提供相同的类......

要在开头隐藏所有div，如果需要，请通过CSS执行：

.div {
  display:none;
}

和jQuery：

$( "button" ).click(function() {
$('.div').hide();
$('.div').eq($(this).index()).show();
});

我已经使用了这些精美的内置jQuery函数：

https://api.jquery.com/index/

https://api.jquery.com/eq/

当然还有更多方法（通过使用数据属性等等）

演示：https://jsfiddle.net/zL24hkur/

jquery一个div替换另一个

3 个答案:

的jQuery

Css类