[英]how to hide show content with jquery
我正在創建一個工作部分,在該部分中,我創建了帶有一些圖像容器的導航
現在,當用戶單擊導航鏈接之一時。 它會顯示鏈接到該導航鏈接的相對圖像容器。 例如,如果我單擊品牌鏈接,它將顯示帶有類別品牌的圖像容器。 就像把它混起來一樣,但是我不允許使用mixitup。
我正在嘗試這個: https : //jsfiddle.net/to1uuvnb/19/
但這沒有幫助
<ul class="nav nav-pills nav-justified nav-tabss">
<li class="active">
<a href="#">All</a>
</li>
<li>
<a href="#">Branding</a>
</li>
<li>
<a href="#">Advertise</a>
</li>
<li>
<a href="#">Print</a>
</li>
</ul>
<div class="branding">
branding
</div>
<div class="advertise">
advertise
</div>
<div class="print">
print
</div>
我的js
$('.nav-tabss').children('li').click(function(){
var branding = $(this).text();
if ( branding === "branding" )
{
$('.branding').show();
$('.adverise').hide();
$('.print').hide()
}
});
我知道我的js代碼效率不高。 如果你們可以更新代碼,那會更好,更有用,謝謝
$('.nav-tabss li a').click(function(){
var branding = $(this).text();
//alert(branding)
if ( branding === "Branding" )
{
$('.branding').show();
$('.advertise').hide();
$('.print').hide()
}
if ( branding === "All" )
{
$('.branding').show();
$('.advertise').show();
$('.print').show()
}
if ( branding === "Advertise" )
{
$('.branding').hide();
$('.advertise').show();
$('.print').hide()
}
if ( branding === "Print" )
{
$('.branding').hide();
$('.advertise').hide();
$('.print').show()
}
});
使用此代碼
您可以使用數據屬性而不是href或文本節點,數據屬性很靈活。
的HTML
<ul class="nav nav-pills nav-justified nav-tabss">
<li class="active"> <a data-filter="all" class="trigger" href="#">All</a></li>
<li> <a data-filter="branding" class="trigger" href="#">Branding</a></li>
<li> <a data-filter="advertise" class="trigger" href="#">Advertise</a></li>
<li> <a data-filter="print" class="trigger" href="#">Print</a></li>
</ul>
<div class="branding">branding</div>
<div class="advertise">advertise</div>
<div class="print">print</div>
Javascript代碼使用switch語句顯示hide div。
JS
$('.trigger').click(function (e) {
e.preventDefault();
var branding = $(e.target).data('filter');
console.log(branding);
switch (branding) {
case "branding":
$('.branding').show();
$('.advertise').hide();
$('.print').hide();
break;
case "advertise":
$('.advertise').show();
$('.branding').hide();
$('.print').hide();
break;
case "print":
$('.advertise').hide();
$('.branding').hide();
$('.print').show();
break;
case "all":
$('.advertise').show();
$('.branding').show();
$('.print').show();
break;
default:
$('.branding').show();
$('.advertise').show();
$('.print').show();
}
檢查是否要相同:
$('.nav-tabss').children('li').click(function(){
var branding = $(this).text().trim().toLowerCase();
if ( branding === "branding" )
{
$('.branding').show();
$('.advertise').hide();
$('.print').hide()
}
else if( branding === "advertise" )
{
$('.branding').hide();
$('.advertise').show();
$('.print').hide()
}
else if( branding === "print" )
{
$('.branding').hide();
$('.advertise').hide();
$('.print').show()
}
else
{
$('.branding').show();
$('.advertise').show();
$('.print').show()
}
});
好了,看看您的html好像您正在使用引導程序。 您為什么不只使用引導程序的選項卡 :
$(function() { $('#nav-tabss a').click(function(e) { e.preventDefault() $(this).tab('show') }) })
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div> <ul class="nav nav-pills nav-justified" id="nav-tabss"> <li class="active"> <a href="#none" data-toggle="tab">All</a> </li> <li> <a href="#branding" data-toggle="tab">Branding</a> </li> <li> <a href="#advert" data-toggle="tab">Advertise</a> </li> <li> <a href="#print" data-toggle="tab">Print</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="none">None</div> <div class="tab-pane" id="branding">Branding</div> <div class="tab-pane" id="advert">Advertise</div> <div class="tab-pane" id="print">Print</div> </div> </div>
嘗試這個
$('.nav-tabss').on('click','a',function(){
var branding = $(this).text();
if ( branding === "Branding" )
{
$('.branding').show();
$('.adverise').hide();
$('.print').hide()
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.