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 Wrappers

<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 wrapper

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

Demo

Answer 4

您可以使用 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

如何更好地处理多个菜单项之间的hide（），show（）div？

4 个答案: