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是一种语义语言。这意味着我们使用最能描述内容的标签。锚标记描述了导航，并且将其简单地用作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>

最后，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 2

只需使用这样的click事件处理程序即可。

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 3

您可以为onclick标签使用<a>。如果您想让它看起来像一个链接，请不要忘记放置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通过标签显示/隐藏元素

3 个答案: