如何使用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>