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

我压缩了一点代码，但你也应该更改li项目

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);
});

如您所见，我添加了一个section属性，您可以将其指定为toggle（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>

如何使用jQuery切换元素？

4 个答案: