显示/隐藏具有基于数据属性的ID的div(onclick) [英] show/hide div with id based on data attribute (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结构:
<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都可见。 (由于Google以及没有JS的用户)
At the beginning all div's are visible. (Because of Google and for User without JS)
如果页面已加载,则应隐藏除主div以外的所有页面。如果我使用数据属性 title_1单击导航点,则相关的div应该可见,而主div也应该隐藏。活动类也应跳到新的活动导航点。 :)
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. :)
有可能吗?我不知道如何解决此问题。
Is that possible? I don't know how to get the solution for this problem.
感谢您的帮助!
推荐答案
您可以将ID与数据属性相匹配,如下所示:
you could match the ID with the data-attr like this:
$("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();
}
});
});
http://jsfiddle.net/mcko06ht/
这篇关于显示/隐藏具有基于数据属性的ID的div(onclick)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!