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

果酱12345

我目前正在使用一个按钮,单击该按钮将显示或隐藏一个段落,我想知道是否可以在此处使用链接而不是按钮?显然,标签没有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>

提前致谢

斯科特·马库斯(Scott Marcus)

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

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

现在,您应该这样做吗?绝对不。原因是HTML是一种语义语言。这意味着我们使用最能描述内容的标签。锚标记描述了导航,并将其简单地用作click事件的“钩子”是对标记的错误使用。为您的内容使用正确的语义元素是允许各种设备知道如何处理该内容的关键。例如,有视力障碍的人依靠屏幕阅读软件来帮助他们上网。这些屏幕阅读器知道<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>

最后,您实际上不应该首先使用内联HTML事件属性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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章