JavaScript 通过标签显示/隐藏元素

Question

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

我会尽量不让大量代码让您感到厌烦。 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

任何可见元素都可以有 click事件(包括 <a> 元素)，因此您只需将 HTML 切换为:

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

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

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

#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>