javascript - 如何更好地处理多个菜单项之间的 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

是的。首先，找出一个选择器，它将选择所有菜单包装器并将它们全部隐藏。然后展示你想要的那个。

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

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

Answer 2

尝试这样的事情

锚链接：

  <a id="aWrapper" class="myMenu">A</a>
  <a id="bWrapper" class="myMenu">B</a>

div 包装器

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

Javascript

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

Answer 3

在不更改标记的情况下，

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

演示

Answer 4

您可以使用HTML5 data-* 属性来完成工作。

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()
});​

检查演示