我是否正确使用此脚本?
问题描述:
我是新来使用JavaScript。我是否正确使用以下脚本?我是否正确使用此脚本?
function func() {
document.getElementById('div1').style.display = 'block'
document.getElementById('div2').style.display = 'none'
document.getElementById('div3').style.display = 'none'
if ("div1") {
document.getElementById('div1').style.display = 'block'
document.getElementById('div2').style.display = 'none'
document.getElementById('div3').style.display = 'none'
}
if ("div2") {
document.getElementById('div1').style.display = 'none'
document.getElementById('div2').style.display = 'block'
document.getElementById('div3').style.display = 'none'
}
if ("div3") {
document.getElementById('div1').style.display = 'none'
document.getElementById('div2').style.display = 'none'
document.getElementById('div3').style.display = 'block'
}
}
<ul>
<li><a class="active" href="#home" func()="div1">Home</a>
</li>
<li><a href="#SubmitNewRequest" func()="div2">Submit new request</a>
</li>
<li><a href="#SearchExisting" func()="div3">Search existing requests</a>
</li>
</ul>
答
有几件事情:
- HTML标签都有一个名称(如 '一' 或 '格'),并可以有属性(如“身份证','href'等)。属性是键值对(如
id="croissant"
或href="#head"
) -
假设您意图让用户点击链接来显示/隐藏div,您需要在锚点上使用
onclick
属性元件。# INCORRECT func()="div1" # CORRECT onclick="func('div1')"
JavaScript函数需要采取的参数,这样就可以在函数调用发送信息(div的名称,在这种情况下)
- 的该
func
if语句JavaScript的内代码应评估为布尔条件:true或false。
基于这些,我已经调整了你给出的代码示例,以便它可以工作;点击“运行代码片段”以查看它的实际运行情况。这不一定是生产代码,但是这应该更好地说明应该考虑的不同组件。
function func(div) {
document.getElementById('div1').style.display = 'none'
document.getElementById('div2').style.display = 'none'
document.getElementById('div3').style.display = 'none'
if (div == "div1") {
document.getElementById('div1').style.display = 'block'
}
if (div == "div2") {
document.getElementById('div2').style.display = 'block'
}
if (div == "div3") {
document.getElementById('div3').style.display = 'block'
}
}
#div1 {
display:none;
}
#div2 {
display:none;
}
#div3 {
display:none;
}
<ul>
<li><a class="active" href="#home" onclick="func('div1')">Home</a></li>
<li><a href="#SubmitNewRequest" onclick="func('div2')">Submit new request</a></li>
<li><a href="#SearchExisting" onclick="func('div3')">Search existing requests</a></li>
</ul>
<div id="div1">Content A</div>
<div id="div2">Content B</div>
<div id="div3">Content C</div>
+0
太棒了。这正是我需要的。谢谢! – codenoob
请格式化你的代码更易读。你的问题到底是什么? –
对不起,我对这个网站很陌生。我想知道这段代码是否写得正确。 – codenoob
简短的答案是@codenoob,它不是。我正在研究解决其面临的问题的很大一部分的答案;挂紧。 –