0

現在、これらのメニュー項目があります。

A    B    C    D

そして、それぞれのターゲットラッパーdivを表示/非表示にするjQuery。

$("#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>
4

4 に答える 4

2

はい。まず、すべてのメニューラッパーを選択してすべて非表示にするセレクターを見つけます。次に、必要なものを表示します。

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

        $(".menuWrapper").hide();
        $("#aWrapper").show();
}
于 2012-11-01T06:30:01.963 に答える
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();
}
于 2012-11-01T06:40:20.850 に答える
2

マークアップを変更せずに、

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

デモ

于 2012-11-01T07:27:29.327 に答える
1

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

デモを確認

于 2012-11-01T06:50:32.800 に答える