javascript - 一次显示一个隐藏的 div

Question

我有 4 个隐藏的 div，我需要一次显示一个。

使用我的代码，当我单击其中一个按钮时，它会显示相应隐藏 div 的内容，如果我单击同一个按钮，它将隐藏内容；但是，如果我单击多个按钮，它将显示我单击的每个按钮对应的内容。

我需要的是，如果我单击一个按钮来显示一个 div，当我单击另一个按钮时，前一个按钮会消失并显示新的一个。

我对此很陌生，如果有人能帮助我，我将不胜感激。我确实尝试了许多相关问题的解决方案，但无法使其正常工作

<p class="btn " onclick="$('#div1').toggle(800);">Show div1</p>
<p class="btn " onclick="$('#div2').toggle(800);">Show div2</p>
<p class="btn " onclick="$('#div3').toggle(800);">Show div3</p>
<p class="btn " onclick="$('#div4').toggle(800);">Show div4</p>

<div id="div1" style="display:none"; >
 <div class="container">
    <p>This is the content of div1</p>
 </div>
</div>

<div id="div2" style="display:none"; >
 <div class="container">
    <p>This is the content of div2</p>
 </div>
</div>

<div id="div3" style="display:none"; >
 <div class="container">
    <p>This is the content of div3</p>
 </div>
</div>

<div id="div4" style="display:none"; >
 <div class="container">
    <p>This is the content of div4</p>
 </div>
</div>

Answer 1

首先，我们可以对所有这些进行单个函数调用:

此外，我建议为所有您想要淡出的标签提供一个独特的类别

<p class="btn" onclick="toggleDivs('#div1');">Show div1</p>

<div class="fadeOut" id="div1" style="display:none"; >
    <div class="container">
        <p>This is the content of div1</p>
    </div>
</div>

接下来，函数:

这会检查所选的 div 是否隐藏，如果是则该函数运行。如果它是可见的，那么它就是当前选定的 div，并且不会发生任何事情。

var toggleDivs = function (id) {
    if ($(id).css('display') === 'none') {
        $(".fadeOut").hide(800);
        $(id).show(800);
    }
}

希望它有效!