如何使用javascript切换不同的div答案

【问题标题】：how to toggle different divs with javascript如何使用javascript切换不同的div
【发布时间】：2020-04-27 18:48:13
【问题描述】：

function toggleB(){
    var b1 = document.getElementById("1");
    var b2 = document.getElementById("2");
    var b3 = document.getElementById("3");
    
    if (b1.style.display === "none"){
        b1.style.display = "none";
    } else {
        b1.style.display = "block";
    }
    if (b2.style.display === "none"){
        b2.style.display = "none";
    } else {
        b2.style.display = "block";
    }
    if (b3.style.display === "none"){
        b3.style.display = "none";
    } else {
        b3.style.display = "block";
    }   
}

<!DOCTYPE html>
<html>
<script src="script.js"></script>
<body>
    <div id="imgBtns">
        <div id="b1">
           <input onclick="toggleB" type="image" src="/">
            <a href="#">B1</a>
        </div>
        <div id="b2">
            <input onclick="toggleB" type="image" src="/">
            <a href="#">B2</a>
        </div>
        <div id="b3">
            <input onclick="toggleB" type="image" src="/">
            <a href="#">B3</a>
        </div>
    </div>
    <div class="main">
        <div id="mainText">
          <p>This should be displayed first without b1,b2,b3 showing</p>
        </div>
        <div id="button1">
            <p>you clicked b1</p>
        </div>
        <div id="button2">
            <p>you clicked b2</p>
        </div>
        <div id="button3">
            <p>you clicked b3</p>
        </div>
    </div>
</body>
</html>

我希望 javascript 函数能够通过单击图像按钮或标签在显示 div(b1,b2,b3) 之间切换。一旦点击了 img 输入按钮或标签，它应该删除“mainText”并且只向用户显示点击的 div。 mainText div 应该被删除并替换为单击的相应按钮 div。

function toggleB{
    var b1 = document.getElementById("1");
    var b2 = document.getElementById("2");
    var b3 = document.getElementById("3");
    
    if (b1.style.display === "none"){
        b1.style.display = "none";
    } else {
        b1.style.display = "block";
    }
    if (b2.style.display === "none"){
        b2.style.display = "none";
    } else {
        b2.style.display = "block";
    }
    if (b3.style.display === "none"){
        b3.style.display = "none";
    } else {
        b3.style.display = "block";
    }   
}

<!DOCTYPE html>
<html>
<script src="script.js"></script>
<body>
    <div id="imgBtns">
        <div id="b1">
           <input onclick="toggleB" type="image" src="/">
            <a href="#">B1</a>
        </div>
        <div id="b2">
            <input onclick="toggleB" type="image" src="/">
            <a href="#">B2</a>
        </div>
        <div id="b3">
            <input onclick="toggleB" type="image" src="/">
            <a href="#">B3</a>
        </div>
    </div>
    <div class="main">
        <div id="mainText">
          <p>This should be displayed first without b1,b2,b3 showing</p>
        </div>
        <div id="1">
            <p>you clicked b1</p>
        </div>
        <div id="2">
            <p>you clicked b2</p>
        </div>
        <div id="3">
            <p>you clicked b3</p>
        </div>
    </div>
</body>
</html>

function toggleB{
    var b1 = document.getElementById("1");
    var b2 = document.getElementById("2");
    var b3 = document.getElementById("3");
    
    if (b1.style.display === "none"){
        b1.style.display = "none";
    } else {
        b1.style.display = "block";
    }
    if (b2.style.display === "none"){
        b2.style.display = "none";
    } else {
        b2.style.display = "block";
    }
    if (b3.style.display === "none"){
        b3.style.display = "none";
    } else {
        b3.style.display = "block";
    }   
}

<!DOCTYPE html>
<html>
<script src="script.js"></script>
<body>
    <div id="imgBtns">
        <div id="b1">
           <input onclick="toggleB" type="image" src="/">
            <a href="#">b1</a>
        </div>
        <div id="b2">
            <input onclick="toggleB" type="image" src="/">
            <a href="#">b2</a>
        </div>
        <div id="b3">
            <input onclick="toggleB" type="image" src="/">
            <a href="#">b3</a>
        </div>
    </div>
    <div class="main">
        <div id="mainText">
          <p>This should be displayed first without b1,b2,b3 showing</p>
        </div>
        <div id="1">
            <p>b1</p>
        </div>
        <div id="2">
            <p>b2</p>
        </div>
        <div id="3">
            <p>b3</p>
        </div>
    </div>
</body>
</html>

【问题讨论】：

id 不能以 number 开头。当使用onclick（这被认为是不好的做法）时，函数名必须以括号结尾@987654330@

标签： javascript

【解决方案1】：

你的整个概念太复杂了。

相反，将div 的id 切换为data-toggles-属性。然后动态选择div 并切换hidden 属性。

一个简化的例子：

const buttons = document.querySelectorAll('[data-toggles]');

buttons.forEach(button => button.addEventListener('click', (event) => {
  const toggleDiv = document.getElementById(button.dataset.toggles);
  toggleDiv.toggleAttribute('hidden');
}));

.toggle-divs>div[id] {
  background-color: #a00;
  color: white;
  margin: 10px;
  text-align: center;
  width: 200px;
}

.toggle-divs>div[id]::before {
  content: "#"attr(id)" here";
}

<div class="toggle-buttons">
  <button data-toggles="foo">toggle #foo</button>
  <button data-toggles="bar">toggle #bar</button>
  <button data-toggles="baz">toggle #baz</button>
</div>

<div class="toggle-divs">
  Below here is the toggle divs:
  
  <div id="foo" hidden></div>
  <div id="bar" hidden></div>
  <div id="baz" hidden></div>
</div>

【讨论】：