<a>标签上的onclick事件需要点击两次

Question

为什么我需要在我的“a”标签上点击两次来运行 onclick 事件？我的目标：当“a”标签被点击时，显示为块下面默认隐藏的div。

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>

我还尝试实现的是一次只显示一个 .details_object，所以如果显示了一个，但调用了另一个函数，请将第一个设置为默认值。

Answer 1

我会稍微更改您的 html，以便您可以使用链接的 href 属性，然后只有一个函数来显示和隐藏相关的 div，而不是每个链接的函数（js 中的注释解释了我所做的事情）：var divs = document.getElementsByClassName('details_object'); // get all the detail divsvar buttons = document.getElementsByTagName('a'); // get all the linksfor (var i = 0, len = buttons.length; i < len; i++) {&nbsp; buttons[i].addEventListener("click", function(e) { // bind your click to the buttons (pass the event into the function)&nbsp; &nbsp; e.preventDefault(); // stop the default click event of the anchor&nbsp; &nbsp; for (var j = 0; j < divs.length; j++) {&nbsp; &nbsp; &nbsp; 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 #)&nbsp; &nbsp; &nbsp; &nbsp; divs[j].style.display = 'block'; // if they match - show the div&nbsp; &nbsp; &nbsp; &nbsp; buttons[j].classList.add('highlight');&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; divs[j].style.display = 'none'; // if they don't match - hide the div&nbsp; &nbsp; &nbsp; &nbsp; buttons[j].classList.remove('highlight');&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; });};.highlight {&nbsp; background: green;}<header class="container">&nbsp; <nav class="navbar">&nbsp; &nbsp; <a id="1" href="#description">Description</a>&nbsp; &nbsp; <a id="2" href="#benefits">Benefits</a>&nbsp; </nav></header><div class="details">&nbsp; <div class="details_object" id="description" style="display: none">&nbsp; &nbsp; description&nbsp; &nbsp; <p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>&nbsp; &nbsp; <p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>&nbsp; </div>&nbsp; <div class="details_object" id="benefits" style="display: none">&nbsp; &nbsp; benefits&nbsp; &nbsp; <p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>&nbsp; &nbsp; <p> <span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo, dolorem. </p>&nbsp; </div></div>

Answer 2

您可以使用 Javascript 的innerHTML属性使其更优化和更容易。您可以从此处了解更多信息。function myFunction1 (num) {&nbsp; &nbsp; document.getElementById("description").innerHTML= "Description paragraph";}function myFunction2 (num) {&nbsp; &nbsp; document.getElementById("description").innerHTML= "Benefits paragraph";&nbsp; &nbsp;&nbsp;}function myFunction (button) {&nbsp; &nbsp; var x = button.id;&nbsp; &nbsp; switch (x) {&nbsp; &nbsp; &nbsp; &nbsp; case '1':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; myFunction1(x);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case '2':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; myFunction2(x);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }}var buttons = document.getElementsByTagName('a');for (var i = 0, len = buttons.length; i < len; i++) {&nbsp; &nbsp; buttons[i].onclick = function (){&nbsp; &nbsp; &nbsp; &nbsp; myFunction (this);&nbsp; &nbsp; }};<header class="container">&nbsp; &nbsp; <nav class="navbar">&nbsp; &nbsp; &nbsp; &nbsp; <a id="1">Description</a>&nbsp; &nbsp; &nbsp; &nbsp; <a id="2">Benefits</a>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </nav>&nbsp;</header><div class="details">&nbsp; &nbsp; <div class="details_object"&nbsp; id="description"/>&nbsp; &nbsp; <div class="details_object"&nbsp; id="benefits" />&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</div>