gpt4 book ai didi

javascript - 根据数据属性显示/隐藏带有 id 的 div (onclick)

转载 作者:太空宇宙 更新时间:2023-11-04 13:41:06 25 4
gpt4 key购买 nike

我有以下列表:

<ul>
<li><a href="" class="active" data-related="main">Main</a></li>
<li><a href="" data-related="title_1">Title 1</a></li>
<li><a href="" data-related="title_2">Title 2</a></li>
<li><a href="" data-related="title_3">Title 3</a></li>
<li><a href="" data-related="title_4">Title 4</a></li>
</ul>

以及以下 div 结构:

<div id="main">... Content ...</div>
<div id="title_1">... Content ...</div>
<div id="title_2">... Content ...</div>
<div id="title_3">... Content ...</div>
<div id="title_4">... Content ...</div>

一开始所有的 div 都是可见的。 (因为谷歌和没有 JS 的用户)

如果页面已加载,除主 div 外的所有内容都应隐藏。如果我单击具有数据属性“title_1”的导航点,则相关的 div 应该可见,并且主 div 也应该隐藏。 active 类也应该跳转到新的事件导航点。 :)

这可能吗?我不知道如何找到这个问题的解决方案。

感谢您的帮助!

最佳答案

您可以在 ul li 中的元素上使用点击事件并获取属性 data-related。然后你可以使用它并找到 id 与 data-related 相同的 div 和切换(隐藏/显示或其他任何东西):

$("ul li a").on("click", function() {
$("div[id=" + $(this).attr("data-related") + "]").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#" class="active" data-related="main">Main</a>

</li>
<li><a href="#" data-related="title_1">Title 1</a>

</li>
<li><a href="#" data-related="title_2">Title 2</a>

</li>
<li><a href="#" data-related="title_3">Title 3</a>

</li>
<li><a href="#" data-related="title_4">Title 4</a>

</li>
</ul>
<div id="main">... Content ...</div>
<div id="title_1">... Content ...</div>
<div id="title_2">... Content ...</div>
<div id="title_3">... Content ...</div>
<div id="title_4">... Content ...</div>

addClass/removeClass 的另一个例子:

$("ul li a").on("click", function() {
$("div").removeClass("activeLnk");
$("div[id=" + $(this).attr("data-related") + "]").addClass("activeLnk");
});
.activeLnk {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a href="#" class="active" data-related="main">Main</a>

</li>
<li><a href="#" data-related="title_1">Title 1</a>

</li>
<li><a href="#" data-related="title_2">Title 2</a>

</li>
<li><a href="#" data-related="title_3">Title 3</a>

</li>
<li><a href="#" data-related="title_4">Title 4</a>

</li>
</ul>
<div id="main">... Content ...</div>
<div id="title_1">... Content ...</div>
<div id="title_2">... Content ...</div>
<div id="title_3">... Content ...</div>
<div id="title_4">... Content ...</div>

关于javascript - 根据数据属性显示/隐藏带有 id 的 div (onclick),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27179069/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com