为什么我需要在我的“a”标记上单击两次才能运行onclick事件? 我的目标:当单击“a”标签时,显示为块下面的div,这是默认隐藏的。
null
function myFunction1(num) {
var x = document.getElementById("description");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";;
}
}
function myFunction2(num) {
var x = document.getElementById("benefits");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";;
return
}
}
function myFunction(button) {
var x = button.id;
switch (x) {
case '1':
myFunction1(x);
break;
case '2':
myFunction4(x);
break;
default:
return false;
}
}
var buttons = document.getElementsByTagName('a');
for (var i = 0, len = buttons.length; i < len; i++) {
buttons[i].onclick = function() {
myFunction(this);
}
};
<header class="container">
<nav class="navbar">
<a id="1">Description</a>
<a id="2">Benefits</a>
</nav>
</header>
<div class="details">
<div class="details_object" id="description" style="display: none">
<p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>
<p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>
</div>
<div class="details_object" id="benefits" style="display: none">
<p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>
<p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>
</div>
</div>
null
我还试图实现的是一次只显示一个.details_object,因此如果显示了一个,但调用了另一个函数,则将第一个函数设置为默认值。
我将稍微修改您的html,以便您可以使用链接的href属性,然后只有一个函数来显示和隐藏相关的div,而不是每个链接都有一个函数(js中的注释解释了我所做的工作):
null
var divs = document.getElementsByClassName('details_object'); // get all the detail divs
var buttons = document.getElementsByTagName('a'); // get all the links
for (var i = 0, len = buttons.length; i < len; i++) {
buttons[i].addEventListener("click", function(e) { // bind your click to the buttons (pass the event into the function)
e.preventDefault(); // stop the default click event of the anchor
for (var j = 0; j < divs.length; j++) {
if (divs[j].id === e.currentTarget.hash.substr(1)) { // compare the id of the div with the hash value of the link href (minus the #)
divs[j].style.display = 'block'; // if they match - show the div
} else {
divs[j].style.display = 'none'; // if they don't match - hide the div
}
}
});
};
<header class="container">
<nav class="navbar">
<a id="1" href="#description">Description</a>
<a id="2" href="#benefits">Benefits</a>
</nav>
</header>
<div class="details">
<div class="details_object" id="description" style="display: none">
description
<p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>
<p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>
</div>
<div class="details_object" id="benefits" style="display: none">
benefits
<p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>
<p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>
</div>
</div>
您可以使用JavaScript的innerHTML
属性使其更优化,更容易。 你可以从这里了解更多。
null
function myFunction1 (num) {
document.getElementById("description").innerHTML= "Description paragraph";
}
function myFunction2 (num) {
document.getElementById("description").innerHTML= "Benefits paragraph";
}
function myFunction (button) {
var x = button.id;
switch (x) {
case '1':
myFunction1(x);
break;
case '2':
myFunction2(x);
break;
default:
return false;
}
}
var buttons = document.getElementsByTagName('a');
for (var i = 0, len = buttons.length; i < len; i++) {
buttons[i].onclick = function (){
myFunction (this);
}};
<header class="container">
<nav class="navbar">
<a id="1">Description</a>
<a id="2">Benefits</a>
</nav>
</header>
<div class="details">
<div class="details_object" id="description"/>
<div class="details_object" id="benefits" />
</div>