简化Jquery隐藏div

为了简化jquery函数bellow，它使用click（）隐藏并显示一个数字div，可以使用next（），但不熟悉实现它的方法

   $(function() {
    $('a#deliveryLink').addClass('selected');
    $('#sizeguideDiv, #returnsDiv, #currencyDiv').hide();
    $('a#sizeguideLink').click(function() {
        $(this).addClass('selected');
        $('a#deliveryLink, a#returnsLink, a#currencyLink').removeClass('selected');
        $('#sizeguideDiv').show();
        $('#deliveryDiv, #returnsDiv, #currencyDiv').hide();
        return false;
    });
    $('a#returnsLink').click(function() {
        $(this).addClass('selected');
        $('a#deliveryLink, a#sizeguideLink, a#currencyLink').removeClass('selected');
        $('#returnsDiv').show();
        $('#sizeguideDiv, #deliveryDiv, #currencyDiv').hide();
        return false;
    });
    $('a#deliveryLink').click(function() {
        $(this).addClass('selected');
        $('a#returnsLink, a#sizeguideLink, a#currencyLink').removeClass('selected');
        $('#deliveryDiv').show();
        $('#sizeguideDiv, #returnsDiv, #currencyDiv').hide();
        return false;
    });
    $('a#currencyLink').click(function() {
        $(this).addClass('selected');
        $('a#returnsLink, a#sizeguideLink, a#deliveryLink').removeClass('selected');
        $('#currencyDiv').show();
        $('#sizeguideDiv, #returnsDiv, #deliveryDiv').hide();
        return false;
    });
});

html代码

<div class="productPagenav">

    <a id="sizeguideLink" href="#">Size  Guide</a>
    <a id="returnsLink" href="#">Returns</a>
    <a id="deliveryLink" href="#">Delivery</a>
    <a id="currencyLink" href="#">Currencies</a>

    <div id="sizeguideDiv">
    </div>

    <div id="returnsDiv">
    </div>

    <div id="deliveryDiv">
    </div>

    <div id="currencyDiv">
    </div>

    </div>

---

我不知道你到底想解决什么问题，但看起来你在尝试手风琴之类的东西

也许这个链接可以帮助你

Html

---

hth

我不知道你到底想解决什么问题，但看起来你在尝试手风琴之类的东西

也许这个链接可以帮助你

Html

---

hth

将类添加到所有锚点和

$('a.someclass').click(function() {
$('a.someclass').removeClass('selected').each(function() {
    $(this).next('div').hide(); });

$(this).addClass('selected').next('div').show();

})

---

将类添加到所有锚点和

$('a.someclass').click(function() {
$('a.someclass').removeClass('selected').each(function() {
    $(this).next('div').hide(); });

$(this).addClass('selected').next('div').show();

})

试试这个：

function showDiv(which){
$('.productPagenav a').click(function() {
$('.productPagenav a').removeClass('selected');
$('.productPagenav div').hide();
$(this).addClass('selected');
$('#' + which).show();
})
}

像这样应用：

showDiv（'deliveryDiv'）

编辑：细化，只需为每个与ID同名的链接添加一个“rel”属性，查看我的示例：


代码如下：

$('.productPagenav a').click(function() {
    $('.productPagenav a').removeClass('selected');
    $('.productPagenav div').hide();
    $(this).addClass('selected');
    $("#" + $(this).attr("rel")).show();
});

试试这个：

function showDiv(which){
$('.productPagenav a').click(function() {
$('.productPagenav a').removeClass('selected');
$('.productPagenav div').hide();
$(this).addClass('selected');
$('#' + which).show();
})
}

像这样应用：
showDiv（'deliveryDiv'）

编辑：细化，只需为每个与ID同名的链接添加一个“rel”属性，查看我的示例：


代码如下：

$('.productPagenav a').click(function() {
    $('.productPagenav a').removeClass('selected');
    $('.productPagenav div').hide();
    $(this).addClass('selected');
    $("#" + $(this).attr("rel")).show();
});

HTML:

现场演示：


如果没有锚定，则更简单：
HTML:

现场演示：


没有锚更简单：
我把它弄得很紧凑

html:

js:

我买的很紧凑

html:

js:

下面是一个使用jQuery数据将菜单配置为特定div的示例

HTML:

JavaScript:

$('.nav a').click(function() {
    $(this).parent().addClass('selected').siblings().removeClass('selected');
    $(this).closest('ul').next().children()
            .eq( $(this).parent().index() ).show().siblings().hide();
    return false;
}).triggerHandler('click');

$(function() {
    // initialize
    var divId = $("#anchor-wrap a:first").addClass("selected").data("id");
    $("#"+divId).addClass("selected");
    $("#anchor-wrap a").click(function(evt) {
        evt.preventDefault();
        var divId = $(this).data("id");
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
        $("#" + divId).addClass("selected");
    });
});

我喜欢这样做的原因是JavaScript/CSS是通用的，并且在添加新链接时保持不变。您只需要配置jQuery的“数据id”属性。这是一个jsFiddle


希望有帮助

Bob
下面是一个使用jQuery数据将菜单配置为特定div的示例

HTML:

JavaScript:

$('.nav a').click(function() {
    $(this).parent().addClass('selected').siblings().removeClass('selected');
    $(this).closest('ul').next().children()
            .eq( $(this).parent().index() ).show().siblings().hide();
    return false;
}).triggerHandler('click');

$(function() {
    // initialize
    var divId = $("#anchor-wrap a:first").addClass("selected").data("id");
    $("#"+divId).addClass("selected");
    $("#anchor-wrap a").click(function(evt) {
        evt.preventDefault();
        var divId = $(this).data("id");
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
        $("#" + divId).addClass("selected");
    });
});

我喜欢这样做的原因是JavaScript/CSS是通用的，并且在添加新链接时保持不变。您只需要配置jQuery的“数据id”属性。这是一个jsFiddle


希望有帮助

Bob
考虑使用
$。toggleClass（）
您的代码是多余的。考虑使用CSS类…考虑使用<代码> $.ToGLCGLASS（）<代码> >您的代码是冗余的。考虑使用CSS类…
    <div id="anchor-wrap">
        <a id="sizeguideLink" href="#" data-id="sizeguideDiv">Size  Guide</a>
        <a id="returnsLink" href="#" data-id="returnsDiv">Returns</a>
        <a id="deliveryLink" href="#" data-id="deliveryDiv">Delivery</a>
        <a id="currencyLink" href="#" data-id="currencyDiv">Currencies</a>
    </div>

    <div id="div-wrap">
        <div id="sizeguideDiv">
            size guide
        </div>

        <div id="returnsDiv">
            returns
        </div>

        <div id="deliveryDiv">
            delivery
        </div>

        <div id="currencyDiv">
            currency
        </div>

    </div>
</div>

#div-wrap > div{
    display: none;   
}

#div-wrap > div.selected{
    display: block;
}

#anchor-wrap a{
    background-color: #fff;
    color: #000;
}

#anchor-wrap a.selected{
    background-color: #000;
    color: #fff;
}

$(function() {
    // initialize
    var divId = $("#anchor-wrap a:first").addClass("selected").data("id");
    $("#"+divId).addClass("selected");
    $("#anchor-wrap a").click(function(evt) {
        evt.preventDefault();
        var divId = $(this).data("id");
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
        $("#" + divId).addClass("selected");
    });
});