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

试试这个：

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 4

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

希望有所帮助。

鲍勃

简化Jquery Hide Divs

6 个答案: