单击新按钮时如何关闭所有其他div？

Question

我有一个包含 5 个按钮的按钮组。我想要按钮的 onclick 事件来切换 5 个不同的 div。单击按钮 1 打开/关闭 div 1，单击按钮 2 打开/关闭 div 2，依此类推。 div 在这里只是文本。

第一次点击按钮 --> 显示 div 第二次点击按钮 --> 隐藏 div

但是，当我只单击一个按钮并显示它的 div 并单击另一个按钮时，另一个 div 堆叠在第一个 div 之上。如果我单击它的按钮两次，我可以关闭第一个 div，但我希望即使单击不同的按钮也能关闭 div。我怎样才能做到这一点？

到目前为止，我已经附加了 jsfiddle。

我多次看到类似的问题，但似乎没有一个解决方案适合我。任何帮助将不胜感激。

  function togglediv(id) {
            var div = document.getElementById(id);
            div.style.display = div.style.display == "none" ? "block" : "none";
        }

<div class="myButtons">
  <div class="btn-group" id="MatchingEntitiesButtons">

  <button id="Button1" class="roundBtns" onclick="togglediv('NamesTable')" type="button" > List of Names </button>

  <button id="Button2" class="roundBtns" onclick="togglediv('PhoneTable')" type="button"> List of Address </button>

  <button  id="Button3" class="roundBtns" onclick="togglediv('AddressTable')" type="button" > List of Phone#</button>

  <button id="Button4" class="roundBtns" onclick="togglediv('GradesTable')" type="button"> List of Grades</button>

  <button id="Button5" class="roundBtns" onclick="togglediv('SchoolTable')" type="button"> List of Schools </button>  

  </div>
</div>

<div id ="NamesTable" class="TableBody" style="display:none">Names </div>
<div id ="PhoneTable" class="TableBody" style="display:none">Address </div>
<div id ="AddressTable" class="TableBody" style="display:none">Phone# </div>
<div id ="GradesTable" class="TableBody" style="display:none">Grades </div>                  
<div id ="SchoolTable" class="TableBody" style="display:none">School </div>

Answer 1

使用类会使这变得容易得多。您可以选择具有活动类的元素并将其删除。

function togglediv(id) {

  var div = document.getElementById(id);

  document.querySelectorAll(".TableBody.active").forEach(function(elem) {
    if (elem !== div) elem.classList.remove("active");
  });

  // toggle the class to the section that was clicked.
  div.classList.toggle("active");

}

.TableBody {
  display: none;
}

.TableBody.active {
  display: block;
}

<div class="myButtons">
  <div class="btn-group" id="MatchingEntitiesButtons">

    <button id="Button1" class="roundBtns" onclick="togglediv('NamesTable')" type="button"> List of Names </button>

    <button id="Button2" class="roundBtns" onclick="togglediv('PhoneTable')" type="button"> List of Address </button>

    <button id="Button3" class="roundBtns" onclick="togglediv('AddressTable')" type="button"> List of Phone#</button>

    <button id="Button4" class="roundBtns" onclick="togglediv('GradesTable')" type="button"> List of Grades</button>

    <button id="Button5" class="roundBtns" onclick="togglediv('SchoolTable')" type="button"> List of Schools </button>

  </div>
</div>

<div id="NamesTable" class="TableBody">Names </div>
<div id="PhoneTable" class="TableBody">Address </div>
<div id="AddressTable" class="TableBody">Phone# </div>
<div id="GradesTable" class="TableBody">Grades </div>
<div id="SchoolTable" class="TableBody">School </div>

不使用类，你可以只使用循环并将其设置为隐藏

document.querySelectorAll(".TableBody")
  .forEach(function (elem) {
    elem.style.display = "none";
  })

此代码不会切换。如果您需要切换，只需检查元素是否是您当前拥有的元素。

var active = doucument.getElementById(id);
document.querySelectorAll(".TableBody")
  .forEach(function (elem) {
    if (elem !== active) {
      elem.style.display = "none";
    }
  })

Answer 2

循环遍历所有 DIV。如果是指定的DIV，则切换，否则隐藏。

function togglediv(id) {
  document.querySelectorAll(".TableBody").forEach(function(div) {
    if (div.id == id) {
      // Toggle specified DIV
      div.style.display = div.style.display == "none" ? "block" : "none";
    } else {
      // Hide other DIVs
      div.style.display = "none";
    }
  });
}

<div class="myButtons">
  <div class="btn-group" id="MatchingEntitiesButtons">

    <button id="Button1" class="roundBtns" onclick="togglediv('NamesTable')" type="button"> List of Names </button>

    <button id="Button2" class="roundBtns" onclick="togglediv('PhoneTable')" type="button"> List of Address </button>

    <button id="Button3" class="roundBtns" onclick="togglediv('AddressTable')" type="button"> List of Phone#</button>

    <button id="Button4" class="roundBtns" onclick="togglediv('GradesTable')" type="button"> List of Grades</button>

    <button id="Button5" class="roundBtns" onclick="togglediv('SchoolTable')" type="button"> List of Schools </button>

  </div>
</div>

<div id="NamesTable" class="TableBody" style="display:none">Names </div>
<div id="PhoneTable" class="TableBody" style="display:none">Address </div>
<div id="AddressTable" class="TableBody" style="display:none">Phone# </div>
<div id="GradesTable" class="TableBody" style="display:none">Grades </div>
<div id="SchoolTable" class="TableBody" style="display:none">School </div>

Answer 3

当点击任何按钮时隐藏所有div 元素，然后只显示需要显示的元素。

但是，稍微改变一下你的方法：

• 不要使用内联 HTML 事件属性，例如 onclick。有 a bunch of reasons 不要使用这个 25 岁以上的技术 不会死。
• 使用Event Delegation 可以设置单个事件处理程序，但是 根据点击了哪个特定按钮做出反应。
• 摆脱ids。使用ids 会使你的代码变得脆弱，因为你 需要不断更新代码以适应新元素。
• 不要使用内联样式 - - 改用 CSS 类。这消除了 冗余代码，更容易覆盖应用的样式。

var clickedBtnIndex = null;
var shownDiv = null;

// Get all the buttons and divs into Arrays:
let buttons = Array.prototype.slice.call(document.querySelectorAll(".roundBtns"));
let divs = Array.prototype.slice.call(document.querySelectorAll(".TableBody"));

// Set up a single click event handler on the parent element of the buttons
document.querySelector(".btn-group").addEventListener("click", function(evt){ 

  // evt.target is a reference to the specific button that triggered the event
  clickedBtnIndex = buttons.indexOf(evt.target); // Get the index of the clicked button within its group

  // If a button was clicked
  if(evt.target.classList.contains("roundBtns")){
     
     // Loop over the divs
     divs.forEach(function(div){
        // Check to see if it is currently being shown
        if(!div.classList.contains("hidden")){
           shownDiv = div;
        }
     });
  
     hideAll();  // Hide all the divs
     
     // Show/hide just the one that was clicked
     if(divs[clickedBtnIndex] === shownDiv){
       divs[clickedBtnIndex].classList.add("hidden");
       shownDiv = null;
     } else {
       divs[clickedBtnIndex].classList.remove("hidden");  
     }
     
     // Store a reference to the index of the button within its group that was clicked
     clickedBtnIndex = buttons.indexOf(evt.target);
  }

});

// This will hide all the divs
function hideAll(){
  // Loop over the array
  divs.forEach(function(div){
    div.classList.add("hidden");  // Add the hidden class
  });
}

.hidden { display:none; }

<div class="myButtons">
  <div class="btn-group" id="MatchingEntitiesButtons">
    <button class="roundBtns" type="button">List of Names</button>
    <button class="roundBtns" type="button">List of Address</button>
    <button class="roundBtns" type="button">List of Phone#</button>
    <button class="roundBtns" type="button">List of Grades</button>
    <button class="roundBtns" type="button">List of Schools</button>  
  </div>
</div>

<div class="TableBody hidden">Names</div>
<div class="TableBody hidden">Address</div>
<div class="TableBody hidden">Phone#</div>
<div class="TableBody hidden">Grades</div>                  
<div class="TableBody hidden">School</div>

但要真正让这变得更简单，请去掉要显示或隐藏的单独 div，只使用一个 div 作为占位符。然后，只需更改该单个 div 的内容即可。

// Store the data that will need to be displayed in an object that
// has properties that store the arrays of actual data
var data = {
  names: ["Scott","Mary","Tom"],
  addresses: ["10 Main", "23 Elm", "43 Standish"],
  phoneNums: ["555-555-5555","123-456-7890"],
  grades: ["C", "B-", "A+"],
  schools: ["District 1", "District 2", "District 3"]
};

// These map to the object properties and will be used to extract the right data
var keyNames = ["names", "addresses", "phoneNums", "grades", "schools"];

var output = document.querySelector(".output"); // The output element

// Get all the buttons and divs into Arrays:
let buttons = Array.prototype.slice.call(document.querySelectorAll(".roundBtns"));

// Set up a single click event handler on the parent element of the buttons
document.querySelector(".btn-group").addEventListener("click", function(evt){

  // Get the index of the button that was clicked within its group
  var clickedIndex = buttons.indexOf(evt.target);
  
  // Inject the string into the output div
  output.innerHTML = data[keyNames[clickedIndex]].join("<br>");;
});

<div class="myButtons">
  <div class="btn-group" id="MatchingEntitiesButtons">
    <button class="roundBtns" type="button">List of Names</button>
    <button class="roundBtns" type="button">List of Address</button>
    <button class="roundBtns" type="button">List of Phone#</button>
    <button class="roundBtns" type="button">List of Grades</button>
    <button class="roundBtns" type="button">List of Schools</button>  
  </div>
</div>

<div class="output"></div>

并且，为了真正降低复杂性，不要为每个被点击的按钮单独设置div。只需一个div，然后根据点击的按钮更改其中的内容：