簡化jquery隱藏div

Question

尋找簡化jquery函數的吼叫，隱藏和顯示數字divs用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

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 2

我不知道究竟你正在試圖解決什麼，但它看起來像你想的東西像手風琴......

也許這個鏈接可以幫助你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 3

附加類的所有錨及

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

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

}) 

Answer 4

試試這個：

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

適用這樣的：showDiv('deliveryDiv');

編輯：細化，只是具有相同的名稱加上一個 「相對」 屬性的每一個環節，作爲標識，檢查我的例子：

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/

希望有所幫助。

鮑勃