Javascript 切换。（一次一个）标题_Javascript_Html_Css

Javascript 切换。（一次一个）标题

javascript html css

Javascript 切换。（一次一个）标题,javascript,html,css,Javascript,Html,Css,我的程序似乎无法正常运行。我想让程序一次运行一个问题。这意味着如果我点击一个问题，另一个问题就会消失。我试过很多方法，但是当我点击所有的问题时，所有的答案都显示出来了我的代码： faqs.js文件 "use strict"; var $ = function(id) { return document.getElementById(id); }; // the event handler for the click event of each h2 element var toggle =

我的程序似乎无法正常运行。我想让程序一次运行一个问题。这意味着如果我点击一个问题，另一个问题就会消失。我试过很多方法，但是当我点击所有的问题时，所有的答案都显示出来了

我的代码：

faqs.js文件

"use strict";
var $ = function(id) { return document.getElementById(id); };

// the event handler for the click event of each h2 element
var toggle = function() {
var h2 = this;                    // clicked h2 tag     
var div = h2.nextElementSibling;  // h2 tag's sibling div tag

// toggle plus and minus image in h2 elements by adding or removing a class
if (h2.hasAttribute("class")) { 
    h2.removeAttribute("class");    
} else { 
    h2.setAttribute("class", "minus"); 
}

// toggle div visibility by adding or removing a class
if (div.hasAttribute("class")) { 
    div.removeAttribute("class");
} else { 
    div.setAttribute("class", "open"); 
  } 
};

window.onload = function() {
// get the h2 tags
 var faqs = $("faqs");
 var h2Elements = faqs.getElementsByTagName("h2");

 // attach event handler for each h2 tag        
 for (var i = 0; i < h2Elements.length; i++ ) {
    h2Elements[i].onclick = toggle;
}
  // set focus on first h2 tag's <a> tag
  h2Elements[0].firstChild.focus();       
};

您可以检查切换函数中是否存在

.减号和.open
类，并在将它们应用于新的活动项之前将其删除。这里有一个工作：
以及：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FAQs</title>
  <link rel="stylesheet" href="main.css">
  <script src="faqs.js"></script>       
</head>

<body>
  <main id="faqs">
    <h1>JavaScript FAQs</h1>
    <h2><a href="#" >What is JavaScript?</a></h2>
    <div>
        <p>JavaScript is a is a browser-based programming language 
           that makes web pages more responsive and saves round trips to the 
  server.
        </p>
    </div>
    <h2><a href="#">What is jQuery?</a></h2>
    <div>
        <p>jQuery is a library of the JavaScript functions that you're most 
 likely 
           to need as you develop websites.
        </p>
    </div>
    <h2><a href="#">Why is jQuery becoming so popular?</a></h2>
    <div>
        <p>Three reasons:</p>
        <ul>
            <li>It's free.</li>
            <li>It lets you get more done in less time.</li>
            <li>All of its functions are cross-browser compatible.</li>
        </ul>
    </div>
</main>
</body>
</html>

* {
  margin: 0;
  padding: 0;
}
 body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 87.5%;
 width: 650px;
 margin: 0 auto;
 border: 3px solid blue;
 padding: 15px 25px;
}
h1 { 
  font-size: 150%;
}
h2 {
  font-size: 120%;
  padding: .25em 0 .25em 25px;
  cursor: pointer;
  background: url(images/plus.png) no-repeat left center;
}
h2.minus {
   background: url(images/minus.png) no-repeat left center;
}
a {
   color: black;
   text-decoration: none; 
}
a:focus, a:hover { 
   color: blue; 
}
div {
   display: none;
}
div.open {
   display: block;
}
ul {
   padding-left: 45px;
}
li {
  padding-bottom: .25em;
}
p {
  padding-bottom: .25em;
  padding-left: 25px;
}

"use strict";
var $ = function(id) { return document.getElementById(id); };

// the event handler for the click event of each h2 element
var toggle = function() {
    var h2 = this;                    // clicked h2 tag     
    var div = h2.nextElementSibling;  // h2 tag's sibling div tag

    // toggle plus and minus image in h2 elements by adding or removing a class
    if (h2.hasAttribute("class")) { 
        h2.removeAttribute("class");    
    } else {
        var activeHeader = document.getElementsByClassName("minus");
        if(activeHeader.length) {
            activeHeader[0].removeAttribute("class");;
        }
        h2.setAttribute("class", "minus"); 
    }

    // toggle div visibility by adding or removing a class
    if (div.hasAttribute("class")) { 
        div.removeAttribute("class");
    } else {
        var activePanel = document.getElementsByClassName("open");
        if(activePanel.length) {
            activePanel[0].removeAttribute("class");;
        }
        div.setAttribute("class", "open"); 
    } 
};

window.onload = function() {
    // get the h2 tags
    var faqs = $("faqs");
    var h2Elements = faqs.getElementsByTagName("h2");

    // attach event handler for each h2 tag        
    for (var i = 0; i < h2Elements.length; i++ ) {
        h2Elements[i].onclick = toggle;
    }
    // set focus on first h2 tag's <a> tag
    h2Elements[0].firstChild.focus();       
};

var activeHeader = document.getElementsByClassName("minus");
if(activeHeader.length) {
    activeHeader[0].removeAttribute("class");;
}

var activePanel = document.getElementsByClassName("open");
if(activePanel.length) {
    activePanel[0].removeAttribute("class");;
}