JavaScript show/hide 个标签的元素

Question

我目前正在使用一个按钮，单击该按钮会显示或隐藏一个段落，我想知道是否可以在这里使用 link 而不是按钮？显然，标签没有 onclick 属性。但我更希望它只是一个被点击的 link 而不是一个按钮。

我会尽量避免使用大量代码让您感到厌烦。 html 看起来像这样：

function showMore() {
 var dots = document.getElementById("dots");
 var moreText = document.getElementById("moreInfo");
 var moreText2 = document.getElementById("moreInfo2");
 var btnText = document.getElementById("moreLess");

 if (dots.style.display === "none") {
  dots.style.display = "inline";
  btnText.innerHTML = "See more information";
  moreText.style.display = "none";
  moreText2.style.display = "none";
 } else {
  dots.style.display = "none";
  btnText.innerHTML = "See less information";
  moreText.style.display = "inline";
  moreText2.style.display = "inline";
 }
    }

    <span id="dots">.......</span>

    <button onclick="showMore()" id="moreLess">See more Information</button>
    
    <p id="moreInfo" hidden> some text .</p>
    <p id="moreInfo2" hidden> some other text</p>

提前致谢

Answer 1

只需像这样使用单击事件处理程序即可。

document.addEventListener('click', (e) => {
  if (e.target.matches('#moreLess')) {
    showMore();
  }
});

function showMore() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("moreInfo");
  var moreText2 = document.getElementById("moreInfo2");
  var btnText = document.getElementById("moreLess");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "See more information";
    moreText.style.display = "none";
    moreText2.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "See less information";
    moreText.style.display = "inline";
    moreText2.style.display = "inline";
  }
}

<span id="dots">.......</span>

<a id="moreLess">See more Information</a>

<p id="moreInfo" hidden> some text .</p>
<p id="moreInfo2" hidden> some other text</p>

Answer 2

任何可见元素都可以有一个 click 事件（包括 <a> 元素），因此您只需将 HTML 切换为：

<a onclick="showMore()" id="moreLess">See more Information</a>

现在，你应该这样做吗？绝对不是。原因是HTML是一种语义语言。这意味着我们使用最能描述内容的标签。锚标记描述导航，将它们简单地用作 "hooks" 用于 click 事件是标记的错误用法。为您的内容使用正确的语义元素是让各种设备知道如何处理该内容的关键。例如，有视力障碍的人依靠屏幕阅读软件来帮助他们上网。这些屏幕阅读器知道 <a> 元素意味着有一种方法可以导航到某个地方。如果您使用 <a> 元素，但不用于导航，这些用户将得到错误的结果。

如果您希望某些东西在视觉上看起来像 link，而不是按钮，只需设置一个带有 click 事件处理程序的 span 标记。您甚至可以使用 CSS 为其提供与 link 相同的悬停效果：

#moreLess { text-decoration:underline; color:blue; cursor:pointer; }
#moreLess:hover { color: red; }

<span onclick="showMore()" id="moreLess">See more Information</span>

最后，you really shouldn't be setting up your event handling with inline HTML event attributes（onclick）排在第一位。这就是我们在 25 多年前处理事件的方式，不幸的是，这种古老的技术并没有死去，因为人们经常只是复制别人的代码，却不知道他们在复制什么，而且像 W3Schools 这样的糟糕网站仍在推广它.相反，您应该在 JavaScript 中处理所有事件，与 HTML 分开，如下所示：

document.getElementById("clickBait").addEventListener("click", function(){
  console.log("Thanks!");
});

#clickBait { cursor:pointer; text-decoration:underline; color:blue; }
#clickBait:hover { background-color:yellow; }

<span id="clickBait">Click me</span>

Answer 3

您可以为 <a> 个标签设置 onclick。如果你想让它看起来像 link

，别忘了加上 href="#"

function showMore() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("moreInfo");
var moreText2 = document.getElementById("moreInfo2");
var btnText = document.getElementById("moreLess");

if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "See more information";
    moreText.style.display = "none";
    moreText2.style.display = "none";
} else {
    dots.style.display = "none";
    btnText.innerHTML = "See less information";
    moreText.style.display = "inline";
    moreText2.style.display = "inline";
}
}

<span id="dots">.......</span>

<a href="#" onclick="showMore()" id="moreLess">See more Information</a>

<p id="moreInfo" hidden> some text .</p>
<p id="moreInfo2" hidden> some other text</p>

JavaScript show/hide 个标签的元素

JavaScript show/hide elements by a tag

html

javascript

hyperlink

show

hide