如何更好地處理多個菜單項之間的hide（），show（）div？

Question

目前，我有這些菜單項。

A B C D 

而jQuery顯示/隱藏它們各自的目標包裝div。

$("#showItemA").click(function() { 

     $("#aWrapper").show(); 
     $("#bWrapper").hide(); 
     $("#cWrapper").hide(); 
     $("#dWrapper").hide(); 
} 

這是越來越混亂，難以追蹤。有沒有更好的方法來濃縮這隻有1-2個功能？

錨鏈接：

<a id="showItemA">A</a> 
<a id="showItemB">B</a> 
<a id="showItemC">C</a> 
<a id="showItemD">D</a> 

DIV包裝器

<div id="aWrapper"></div> 
<div id="bWrapper"></div> 
<div id="cWrapper"></div> 
<div id="dWrapper"></div> 

Answer 1

嘗試這樣的事情

錨鏈接：

​​

股利包裝

<div class="aWrapper myWrapper"></div> 
<div class="bWrapper myWrapper"></div> 

的Javascript

$(".myMenu").click(function() { 
    $(".myWrapper").hide(); 
    $("." + this.id).show(); 
} 

Answer 2

是。首先，找出一個選擇器，它將選擇所有菜單包裝並隱藏它們。然後顯示你想要的。

$("#showItemA").click(function() { 

     $(".menuWrapper").hide(); 
     $("#aWrapper").show(); 
} 

Answer 3

您可以使用HTML5 數據 - *屬性來完成工作..

HTML

<a href="#" id="showItemA" data-id="aWrapper">A</a> 
<a href="#" id="showItemB" data-id="bWrapper">B</a> 
<a href="#" id="showItemC" data-id="cWrapper">C</a> 
<a href="#" id="showItemD" data-id="dWrapper">D</a> 
DIV Wrappers 

<div id="aWrapper">A</div> 
<div id="bWrapper">B</div> 
<div id="cWrapper">C</div> 
<div id="dWrapper">D</div>​ 

的Javascript

$('a[data-id]').on('click', function(e) { 
    e.preventDefault(); 
    var id = $(this).data('id'); 
    $('div').hide(); 
    $('#'+ id).show() 
});​ 

Check Demo

Answer 4

不改變你的標記，

$('div[id*="Wrapper"]').hide(); 
$('a[id*="showItem"]').on('click', function() { 
    $('div[id*="Wrapper"]').hide(); 
    $('#'+$(this).html().toLowerCase()+"Wrapper").show(); 
})​​​​​​​;​ 

Demo