简化 Jquery 隐藏 Div

Question

希望简化下面的 jquery 函数，该函数使用 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>

Answer 1

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

也许这个链接可以帮助你http://docs.jquery.com/UI/Accordion

Html

<div id="accordion">

   <h3><a href="#">Size Guide</a></h3>
   <div> size guide content </div>

   <h3><a href="#">Returns</a></h3>
   <div> returns content </div>

   <h3><a href="#">Delivery</a></h3>
   <div> devlivery content </div>
</div>

JQuery/Javascript

$('#accordion').accordion();

hth

Answer 2

为所有锚点添加类并

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

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

})

Answer 3

HTML:

<div class="productPagenav">

    <ul class="nav">
        <li> <a href="#">Size  Guide </a> </li>
        <li> <a href="#">Returns     </a> </li>
        <li> <a href="#">Delivery    </a> </li>
        <li> <a href="#">Currencies  </a> </li>
    </ul>

    <ul class="content">
        <li>
            Size Guide
        </li>
        <li>
            Returns
        </li>
        <li>
            Delivery
        </li>
        <li>
            Currencies
        </li>
    </ul>

</div>

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

现场演示： http://jsfiddle.net/simevidas/34KWj/

---

没有锚点就更简单了： http://jsfiddle.net/simevidas/34KWj/ 1/

Answer 4

试试这个：

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

像这样应用： showDiv('deliveryDiv');

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

http://jsfiddle.net/jackJoe/QL3Y9/

这是代码：

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

Answer 5

我得到它非常紧凑 http://jsfiddle.net/grFQu/

html:

<div class="productPagenav">
    <span id="sizeguideLink" data-area="sizeguideDiv" class="link">Size  Guide</span>
    <span id="returnsLink" data-area="returnsDiv" class="link">Returns</span>
    <span id="deliveryLink" data-area="deliveryDiv" class="link">Delivery</span>
    <span id="currencyLink" data-area="currencyDiv" class="link">Currencies</span>

    <div id="sizeguideDiv" class="area">1</div>
    <div id="returnsDiv" class="area">2</div>
    <div id="deliveryDiv" class="area selected">3</div>
    <div id="currencyDiv" class="area">4</div>
</div>

css:

.link {
    cursor:pointer;
    text-decoration:underline;
    color:Blue;
}

.area {
    display:none;
}

.selected {
    display:block;
}

js:

$(function(){
    $('.link').click(function(){
        $(".area").removeClass('selected');

        var id = "#" + $(this).data("area");
        $(id).addClass("selected");
    });
});

Answer 6

下面是一个使用 jQuery 数据将菜单配置到某个 div 的示例。

HTML：

    <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>

CSS：

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

JavaScript：

$(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 'data-id' 属性。这是一个 jsFiddle

http://jsfiddle.net/hqcVZ/2/

希望有所帮助。

鲍勃