Javascript 一次仅显示/隐藏一个div
此代码是常见问题解答的未触及版本，包含三个答案，单击可显示或隐藏这些答案。我的任务是修改以一次只显示一个答案（其他两个答案必须关闭）。 我得到一个提示，使用for循环遍历数组中的h2元素，并删除所有未单击的h2元素的class属性。 谢谢,Javascript 一次仅显示/隐藏一个div,javascript,arrays,loops,Javascript,Arrays,Loops,此代码是常见问题解答的未触及版本，包含三个答案，单击可显示或隐藏这些答案。我的任务是修改以一次只显示一个答案（其他两个答案必须关闭）。 我得到一个提示，使用for循环遍历数组中的h2元素，并删除所有未单击的h2元素的class属性。 谢谢, "use strict"; var $ = function(id) { return document.getElementById(id); }; // the event handler for the click event of each h2
"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();
};
“严格使用”；
var$=函数（id）{return document.getElementById（id）；}；
//每个h2元素的click事件的事件处理程序
var toggle=函数（）{
var h2=this；//单击了h2标记
var div=h2.nextElementSibling；//h2标记的同级div标记
//通过添加或删除类来切换h2元素中的正负图像
if（h2.hasAttribute（“类”）{
h2.删除属性（“类别”）；
}否则{
h2.setAttribute（“类”、“减”）；
}
//通过添加或删除类来切换div可见性
if（div.hasAttribute（“类”）{
分部移除属性（“类别”）；
}否则{
div.setAttribute（“类”、“打开”）；
}
};
window.onload=函数（）{
//获取h2标签
var常见问题=$（“常见问题”）；
var h2Elements=faqs.getElementsByTagName（“h2”）；
//为每个h2标记附加事件处理程序
对于（变量i=0；i“严格使用”；
var$=函数（id）{return document.getElementById（id）；}；
//每个h2元素的click事件的事件处理程序
window.onload=函数（）{
//获取h2标签
var常见问题=$（“常见问题”）；
var h2Elements=faqs.getElementsByTagName（“h2”）；
函数accordionClick（）{
var h2；
对于（变量i=0；i
jQuery是一个JavaScript函数库，您很可能
在开发网站时需要。
原因有三：
- 它是免费的
- 它可以让你在更短的时间内完成更多的工作
- 它的所有功能都是跨浏览器兼容的
<!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 programming language that's built into the major web browsers.
It 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 web sites.
</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;
}
设计第一，代码第二！在设计中，你需要考虑一些事情，比如点击H2元素中的一个链接导航到另一个页面，如果用户点击一个已经打开的答案，你需要做什么，你需要处理两个以上的H2元素吗？如果是的话，为什么在“代码”> OnLoad 函数里面的点击处理器不在哪里？访问h2元素的集合。祝作业顺利：）谢谢：）我会确保在编码之前写出伪代码。））抱歉，我不应该使用实时代码段-它会产生错误，因为没有DOM元素存在，这意味着
h2Elementsfaq如果函数