jquery一个div替换另一个div

假设我有一个包含多个div和多个按钮（或链接）的html文件。

我不希望同时出现多个div。我希望，一旦单击按钮/链接，显示的任何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，但这允许同时出现多个div。

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

jQuery

U可以使用jQuery的toggle()函数，或者如果您只想显示/隐藏div（如果它们已经在您的html中），则只调用show() / hide()函数，如您的示例所示。

只需记住在对新div调用show()之前先hide()所有div，以便一次只显示一个div。

Css类

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

.hidden { visible: none; }

但是，您可能需要使用ID而不是按类查询div，因为在动态更改class属性时可能会出现问题。：）

您可以从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

Css类

相关内容

最新更新

热门标签：