如何在三个 div 之间切换隐藏/显示；动态使用三个按钮（每个按钮属于一个 div）？

Question

可以说，我有

<div class = "buttons">
<button onclick= "toggleFirst()"> Show me Hide me 1</button>
<button onclick= "toggleSecond()"> Show me Hide me 2</button>
<button onclick= "toggleThird();"> Show me Hide me 3</button>
</div>

<div style="display: none"  id="one" >  Random Content1 < /div>
   <div style="display: none"  id="two" >  Random Content 2< /div>
       <div style="display: none"  id="three" >  Random Content 3< /div>

我如何编写一个或多个 JavaScript 函数（请不要使用 jquery）来根据每个按钮动态地打开和关闭内容？如果我单击按钮 1，我希望显示 div id 1 中的内容，如果我再次单击它，我希望隐藏 div id 1 中的内容，或者当我单击按钮 2 时，我只希望显示 div id 2 中的内容并且隐藏其他东西……所以它们的模式和逻辑都是一样的。

Answer 1

像我一样更改 onclick 功能，您不必执行 3 个功能 ，你只需要一个

 function toggContent(content_id) {
            const x = document.getElementById(content_id)
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

<div class="buttons">
        <button onclick="toggContent('one')"> Show me Hide me 1</button>
        <button onclick="toggContent('two')"> Show me Hide me 2</button>
        <button onclick="toggContent('three')"> Show me Hide me 1</button>
    </div>

    <div style="display: none" id="one"> Random Content1
    </div>
    <div style="display: none" id="two"> Random Content 2
    </div>
    <div style="display: none" id="three"> Random Content 3
    </div>

Answer 2

为此，您可以使用style.display 属性

function toggleFirst() {
  let one = document.getElementById("one");
  if (one.style.display == "none") {
    one.style.display = "block"
  } else {
    one.style.display = "none"
  }
}

function toggleSecond() {
  let two = document.getElementById("two");
  if (two.style.display == "none") {
    two.style.display = "block"
  } else {
    two.style.display = "none"
  }
}

function toggleThird() {
  let three = document.getElementById("three");
  if (three.style.display == "none") {
    three.style.display = "block"
  } else {
    three.style.display = "none"
  }
}

<div class="buttons">
  <button onclick="toggleFirst()"> Show me Hide me 1</button>
  <button onclick="toggleSecond()"> Show me Hide me 2</button>
  <button onclick="toggleThird();"> Show me Hide me 3</button>
</div>

<div style="display: none" id="one"> Random Content1
</div>
<div style="display: none" id="two"> Random Content 2
</div>
<div style="display: none" id="three"> Random Content 3
</div>

Answer 3

您已经开始为这些按钮中的每一个提供执行 onClick 的功能。只需定义这些函数并检查 div 的 style 属性的 display 属性。

我继续制作了一个更简单的toggleId 函数，以限制重复的代码量。

另外值得注意的是< /div> 是无效的。您不要在结束 HTML 标记的前面放置空格。你可以把一个放在最后，但没有理由这样做。只需使用</div>。

function toggleFirst()
{
  toggleId("one"); 
}

function toggleSecond()
{
  toggleId("two");
}

function toggleThird()
{
  toggleId("three");
}

function toggleId(id)
{
  var div = document.getElementById(id);
  if(div.style.display == "none")
    div.style.display = "block";
  else
    div.style.display = "none";
}

<div class = "buttons">
<button onclick= "toggleFirst()"> Show me Hide me 1</button>
<button onclick= "toggleSecond()"> Show me Hide me 2</button>
<button onclick= "toggleThird();"> Show me Hide me 3</button>
</div>

<div style="display: none"  id="one" >  Random Content1 </div>
<div style="display: none"  id="two" >  Random Content 2</div>
<div style="display: none"  id="three" >  Random Content 3</div>