顯示和隱藏點擊使用jquery許多div

Question

我想創建一個菜單（沒有下拉）使用jQuery。請檢查下面的一些代碼。

如果我點擊銀河標籤的鏈接，我想顯示div屬性的值爲galaxyTab。同樣，如果我點擊Iphone的鏈接，我想隱藏前面的div（galaxyTab）並顯示div屬性值爲iphone的div。這裏是下面的代碼

<div id="productMenu"> 
    <a href="galaxyTab" class="showproducts">Galaxy Tab</a> 
    <a href="iphone" class="showproducts">Iphone</a> 
    <a href="hpslate" class="showproducts">HP Slate</a> 
</div> 
Unlimited... like this 

<div id="article"> 
<div id="products" class="galaxyTab" style="">Galaxy Tab</div> 
<div id="products" class="iphone" style="display:none">Iphone</div> 
<div id="products" class="hpslate" style="display:none">HPslate</div> 
</div> 

我可以實現通過下面的代碼上述要求的fiddle，但問題是我有來從數據庫中的菜單名稱等信息，並有可能將圍繞15的菜單項，所以下面的方法是不可行的。你能告訴我一個簡單的方法來做到這一點。

感謝提前:)

$('a.showproducts').click(function(){ 
     var a_href = '.'+ $(this).attr('href'); 
        $('.galaxyTab').hide(); 
        $('.iphone').hide(); 
        $('.hpslate').hide(); 

        $(a_href).show(); 

     return false 
    });//.click function ends here 

Answer 1

有幾種預置的解決方案，將幫助你實現這一目標。根據你想如何工作的，有：

手風琴：

http://jqueryui.com/demos/accordion/

標籤：

http://jqueryui.com/demos/tabs/

還有 - 你的HTML註釋。你不應該爲多個條目使用相同的ID - 因爲ID是唯一的。

如果你在每個div上放置另一個類，你也可以編寫這段代碼來手動隱藏div，如果你不想放入像accordion或tabs這樣的大組件。

http://jsfiddle.net/Sqgbb/

$('a.showproducts').click(function(e){ 
    e.preventDefault(); 
    var a_href = '.'+ $(this).attr('href'); 
    $('.products').hide(); 
    $(a_href).show(); 
}); 

Answer 2

這可能是比較可行的：

$('a.showproducts').click(function(e){ 
     e.preventDefault(); 
     var a_href = '.'+ $(this).attr('href'); 
     $('#products:not('+a_href+')').hide(); 
     $(a_href).show(); 
}); 

而應該class="product"，id是獨一無二的。

Answer 3

試試這個代碼：

$('a.showproducts').click(function(){ 
     var a_href = '.'+ $(this).attr('href'); 
        $('#article>div').hide(); 
             $(a_href).show(); 

     return false 
    });//.click function ends here 

這將隱藏所有div無論是哪一個是前所示，然後只顯示DIV一個你想要的。

更新fiddle- http://jsfiddle.net/Wvjbr/4/

Answer 4

會這樣寫：

$('a').click(function(event) { 
    $('.showproducts').hide(); 
    $(event.target).show(); 
}) 

BTW。：

你有一個以上的ID名稱爲 「產品」，這是不可能的
see here： https://stackoverflow.com/a/192066/1067061

希望它有幫助。