![](/img/trans.png)
[英]how to hide and show with data-id Attribute onclick button in jquery
[英]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的用戶)
如果頁面已加載,則應隱藏除主div之外的所有頁面。 如果我點擊帶有數據屬性“title_1”的導航點,相關的div應該是可見的,主div也應該被隱藏。 此類活動應該跳轉到新的活動導航點。 :)
那可能嗎? 我不知道如何解決這個問題。
謝謝你的幫助!
您可以在ul li內的元素上使用click事件並獲取與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>
你可以將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();
}
});
});
在此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>
把它放在腳本標簽中:
$('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();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.