Javascript 根据数据属性显示/隐藏带有 id 的 div (onclick)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27179069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
show/hide div with id based on data attribute (onclick)
提问by emjay
I have the following List:
我有以下清单：
<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>
And the following div structure:
以及以下 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>
At the beginning all div's are visible. (Because of Google and for User without JS)
一开始，所有 div 都是可见的。（因为 Google 和没有 JS 的用户）
If the page is loaded, all except the main div should be hidden. If I'm clicking on the navigation point with the data attribute "title_1" the related div should be visible and the main div should be hidden also. Also the class active should jump to the new active navigation point. :)
如果页面已加载，则除主 div 外的所有页面都应隐藏。如果我点击数据属性为“title_1”的导航点，相关的 div 应该是可见的，主 div 也应该隐藏。此外，active 类应该跳转到新的活动导航点。:)
Is that possible? I don't know how to get the solution for this problem.
那可能吗？我不知道如何获得此问题的解决方案。
Thanks for your help!
谢谢你的帮助！
回答by Alex Char
You can use on click event on a elements inside ul li and get the attribute data-related. Then you can use this and find div with id same as data-relatedand toggle(hide/show or anything else):
您可以在 ul li 中的元素上使用 on click 事件并获取属性data-related。然后你可以使用它并找到与 id 相同的 divdata-related并切换（隐藏/显示或其他任何东西）：
$("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>Another example with addClass/removeClass:
另一个使用 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>回答by user2952238
you could match the ID with the data-attr like this:
您可以像这样将 ID 与 data-attr 匹配：
$("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();
}
});
});
回答by Sebastien B.
Add a class to this html code :
向这个 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>
Put this in a script tag :
把它放在一个脚本标签中：
$('ul a').click(function(e){
$('ul li').removeClass('actif');
$(this).find('li').addClass('actif');
$('.tab').hide();
$('#'+$(this).attr('data-related')).show();
//This is also valid
//$('#'+$(this).data('related')).show();
e.preventDefault();
});
