Упростить Jquery Скрыть Div

Question

, чтобы упростить приведенную ниже функцию jquery, которая скрывает и показывает число делений с помощью click (), может использовать 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();

НТН

Answer 2

добавить класс ко всем якорям и

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

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

})

Answer 3

Вот пример использования данных 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/

Надеюсь, это поможет.

Bob

Answer 4

Я получил это довольно компактно 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;
}

ЯШ:

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

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

Answer 5

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 6

попробуйте это:

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

примените так: showDiv('deliveryDiv');

РЕДАКТИРОВАТЬ: Уточните, просто добавьте атрибут "rel" для каждой ссылки с тем же именем, что и идентификатор,посмотрите мой пример:

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

вот код:

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