Javascript 基于数据属性显示/隐藏id为的div（onclick）

我有以下清单：

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

。。。内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。

开始时，所有div都可见。（因为谷歌和没有JS的用户）

如果页面已加载，则除主div之外的所有内容都应隐藏。如果我用数据属性“title_1”单击导航点，相关div应该可见，主div也应该隐藏。此外，活动类应跳转到新的活动导航点。：）

可能吗？我不知道如何解决这个问题

---

谢谢你的帮助

将类添加到此html代码：

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

---

您可以将ID与数据属性进行如下匹配：

$("div").each(function(){
     $(this).hide();
    if($(this).attr('id') == 'main') {
        $(this).show();
    }
});

$('a').on( "click", function(e) {
    e.preventDefault();
    var id = $(this).attr('data-related'); 
    $("div").each(function(){
        $(this).hide();
        if($(this).attr('id') == id) {
            $(this).show();
        }
    });
});

---

您可以在ul li中的元素上使用单击事件，并获取与数据相关的属性

。然后，您可以使用它查找id与
数据相关的div并进行切换（隐藏/显示或其他任何操作）：


$（“ul li a”）。在（“单击”，函数（）{
$（“div[id=“+$（this.attr（“数据相关”）+”]）toggle（）；
});













... 内容。。。
... 内容。。。
... 内容。。。
... 内容。。。
... 内容…
有可能。。。到目前为止你试过什么。。。至少是文档准备功能？你能提供JSFIDLE吗？“因为谷歌”-为什么？谷歌也在隐藏的div中索引内容。对我来说，听起来你想重新发明一个折叠组件/模块/插件，这在大多数JS框架中都可以找到。你真的应该发布代码，现在你已经努力在JSFIDLE中创建了一个答案：）我真的应该这样做。非常感谢。这几乎是完美的，但是您忘记了删除并添加导航的活动类。如何添加它？啊，我找到了一个解决方案：）使用：$（'a'）。removeClass（“active”）；美元（此）.addClass（“活动”）；
$("div").each(function(){
     $(this).hide();
    if($(this).attr('id') == 'main') {
        $(this).show();
    }
});

$('a').on( "click", function(e) {
    e.preventDefault();
    var id = $(this).attr('data-related'); 
    $("div").each(function(){
        $(this).hide();
        if($(this).attr('id') == id) {
            $(this).show();
        }
    });
});