我想通过 onclick 事件调用函数来仅显示特定的 div。有时我只想显示单个 div，其余所有 div 不应显示在我的网页中。我已经通过使用显示CSS属性尝试过这一点。我只想要一个可以处理这个问题的函数。我可以通过创建多个函数来解决这个问题。
<html>
<head>
</head>
<body>
<ul>
<li><a href="#" onclick="someFunction();">1</a></li><!-- show div1-->
<li><a href="#" onclick="someFunction();">2</a></li><!-- show div2-->
<li><a href="#" onclick="someFunction();">3</a></li><!-- show div3-->
</ul>
<div id="first">content 1</div>
<div id="second">content2</div>
<div id="third">content3</div>
</body>
</html>最佳答案
这个怎么样:
- 每个 div 都需要相同的类，以便您可以一次找到并隐藏它们。
- 该函数需要知道要显示的 div 的 id，因此请传入 id。
查看以下更改:
<html>
<head>
</head>
<body>
<ul id="controls">
<li><a href="#" data-target="first">1</a></li><!-- show div1-->
<li><a href="#" data-target="second">2</a></li><!-- show div2-->
<li><a href="#" data-target="third">3</a></li><!-- show div3-->
</ul>
<div id="first" class="content">content 1</div>
<div id="second" class="content">content2</div>
<div id="third" class="content">content3</div>
<script>
$("#controls a").click(function() {
someFunction($(this).attr("data-target"));
});
function someFunction(divId) {
$(".content").hide();
$("#" + divId).show();
}
</script>
</body>
</html>
注意:您需要引用 jQuery 才能使 $ 语法发挥作用。
关于javascript - 在 html 页面上动态显示特定的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31439483/