我正在创建一个网页的所有内容标题的列表在顶部。 当用户点击其中的每一个,网页的相关部分应该变成蓝色。 然而,它并没有。 我的JavaScript肯定出了问题。 初始列表:
<h1><u>Quotations!</u></h1>
<ol>Index:
<li id="bq" onclick="bq()">blockquotes</li>
<li id="sq" onclick="sq()">Short Quotations</li>
<li id="a" onclick="a()">Abbreviations</li>
<li id="ad" onclick="ad()">Addresses</li>
<li id="c" onclick="c()">Cites</li>
<li id="bdo" onclick="bdo()">BDOs</li>
</ol>
页面内容:
<div id="bqdiv">
<h5>Blockquotes</h5>
<blockquote>
These have indents! They define a section that is quoted from another source.
</blockquote>
</div>
<div id="sqdiv">
<h5>Short Quotations (q tag)</h5>
<p>This is an example:
<q>Hello</q>
</p>
</div>
<div id="a">
<h5>Abbreviations</h5>
<p>These can be <abbr title= "HEYA!">hovered</abbr> over!</p>
</div>
<div id="addiv">
<h5>Addresses</h5>
This is an address:
<address>
Addresses are in italic <br>
and browsers always add a break b4 and after the <address></address> element
</address>
After the address
</div>
<div id="cdiv">
<h5>Cites</h5>
<p>
<cite>Cites</cite> define the title of something creative, like a painting!<br>
They are in italic, like this.
</p>
</div>
<div id="bdodiv">
<h5>Bi-Directional Override (BDO)</h5>
<p>It is used to override the text direction, <bdo dir="rtl">like this!</bdo></p>
</div>
到目前为止我拥有的javascript:
function bq() {
document.getElementById("bqdiv").style.color="blue";
}
function sq() {
document.getElementById("sqdiv").style.color="blue"'
}
function ad() {
document.getElementById("addiv").style.color="blue";
}
function c() {
document.getElementById("cdiv").style.color="blue";
}
function bdo() {
document.getElementById("bdodiv").style.color="blue";
}
window.addEventListener("click", function(event)) {
document.getElementById("bqdiv").style.color="black"
document.getElementById("sqdiv").style.color="black"
document.getElementById("addiv").style.color="black"
document.getElementById("cdiv").style.color="black"
document.getElementById("bdodiv").style.color="black"
}
调用Window.OnClick时,您执行的似乎是函数{}
,而不是函数(){}
。 如果可能的话,您应该尝试使用此选项
window.addEventListener("click", function(event) {
});
制作一个“black”函数而不是window.onclick
,并在将颜色设置为蓝色之前调用它,怎么样?
function black() {
document.getElementById("bqdiv").style.color="black";
document.getElementById("sqdiv").style.color="black";
document.getElementById("addiv").style.color="black";
document.getElementById("cdiv").style.color="black";
document.getElementById("bdodiv").style.color="black";
}
并在每个div的onclick函数中调用它(下面的示例中的一个):
function bq() {
black();
document.getElementById("bqdiv").style.color="blue";
}
哦,我刚刚意识到您想要点击其他任何地方来黑化DIV,所以保留window.onclick
-只需使其调用black()
即可。