如何使用jQuery切換元素？

Question

我正在構建一個網站頁面，其中有16項服飾。

我想要一個簡單的文本導航，可以選擇顯示和隱藏男士，女士和全部產品。

導航

<ul class="sortNav"> 
<li class="first">View:</li> 
<li class="men button">Men</li> 
<li class="women button">Women</li> 
<li class="all button active">All</li> 
</ul> 

產品編號

<span class="prod men">Guys shirt</span> 
<span class="prod men">Guys Pant </span> 
<span class="prod women">Girls Pant</span> 
<span class="prod women">Girls Pant</span> 

棘手的部分
只有一個按鈕，可以 「主動」。並且只有該類可見（一個或兩個）纔會被觸發。

在此先感謝。

謝謝！有點結合了這兩個回答。檢查了這一點...

$('.products li.prod').toggle(true); 

$('.sortNav li.button').click(function() { 
    $('.sortNav li.button').removeClass('active'); 
    $(this).addClass('active'); }); 

$('.sortNav li.men').click(function() { 
    $('.products li.prod').toggle(false); 
    $('.products li.men').toggle(true); }); 

$('.sortNav li.women').click(function() { 
    $('.products li.prod').toggle(false); 
    $('.products li.women').toggle(true); }); 

$('.sortNav li.all').click(function() { 
    $('.products li.prod').toggle(true); 

Answer 1

我碾壓一點點的代碼，但你也應該改變李項

HTML：

<ul class="sortNav"> 
<li class="first">View:</li> 
<li section="mens" class="men button">Men</li> 
<li section="womens" class="women button">Women</li> 
<li section="all" class="all button active">All</li> 
</ul> 

<div id="all" class="section">All Clothing</div> 
<div id="mens" class="section">Mens Clothing</div> 
<div id="womens" class="section">Womens Clothing</div> 

JS：

$(document).ready(function(){ 
    $('li.button').click(function(){ //listens to each element li with class button 
     $('li.button').removeClass('active'); //removes 'active' class from all of them 
     $(this).addClass('active'); //adds the class to this one 

     $('.section').toggle(false); 
     $('#'+$(this).attr('section')).toggle(true); 
    }); 

    $(".section").toggle(false); 
}); 

如您所見，我添加了一個部分屬性，您可以將其指定爲切換（true）作爲ID。這有點危險，但它有效。

Answer 2

退房這個js小提琴：http://jsfiddle.net/9kL7q/3/*新小提琴

HTML：

<ul class="sortNav"> 
<li class="first">View:</li> 
<li id="men" class="men button">Men</li> 
<li id="women" class="women button">Women</li> 
<li id="all" class="all button active">All</li> 
</ul> 

<div id="all" class="section">All Clothing</div> 
<div id="men" class="section">Mens Clothing</div> 
<div id="women" class="section">Womens Clothing</div> 

的Javascript：

$(".section").not("#all").toggle(false); 

$(".section").click(function(){ 
    $(".section").toggle(false); 
    $("#" + $(this).attr("id")).toggle(true); 
}); 

Answer 3

@ kmb385：我固定的jQuery選擇爲您作出點擊「男裝」和「女裝」工作http://jsfiddle.net/9kL7q/2/

Answer 4

$(document).ready(function() { 
    $('.sortNav li.button').click(function() { 
     // Set this button as active 
     $('.sortNav li.button').removeClass('active'); 
     $(this).addClass('active'); 

     // Show and hide items that do or don't match this button's classes 
     // (.prod.all won't get messed with, but you could make the HTML say 
     // 'class="prod men women"' instead and it should work) 
     $('.prod.women').toggle($(this).hasClass('womens')); 
     $('.prod.men').toggle($(this).hasClass('mens')); 
    }); 
}); 

與HTML使用，看起來像這樣：

<ul class="sortNav"> 
    <li class="first">View:</li> 
    <li class="mens button">Men</li> 
    <li class="womens button">Women</li> 
    <li class="mens womens button active">All</li> 
</ul> 

<div class="prod all">an item for everyone</div> 
<div class="prod women">Womens item</div> 
<div class="prod men">Mens item</div> 
<div class="prod men">More Mens stuff</div> 
<div class="prod women">More Womens stuff</div>