0

a href="#1"が選択されたときに div を置き換える jquery スクリプトがあります。a href="#1"も置き換えられa href="#2"、その逆も同様です。Jクエリは次のとおりです。

$('.child2, a[href="#1"]').hide()

$('#replacepagelinks a').click(function(){
    $(this).hide().siblings().show()
    var w = this.hash.replace('#', '');
    $('#parent div.child'+w).show().siblings().hide()
})

ここにHTMLがあります。

<div id="parent">
<div class="child1">Child 1 Contents</div>
<div class="child2">Child 2 Contents</div>
</div>
<div id="replacepagelinks">
<a href="#1">Replace Child 1 with Child 2</a>
<a href="#2">Replace Child 2 with Child 1</a>
</div>

ここにjfiddleの実例がありますhttp://jsfiddle.net/KaqZ5/

これは 1 つのインスタンスに最適です。ただし、これらをjqueryメニューに複数回配置すると、問題が発生します。最初のメニュー項目をクリックすると、child1 が表示され、クリックa href="#1"して child2 が表示されます。しかし、2番目のメニュー項目に入ると、jqueryコードがリセットされていないため、child2がまだ表示されています(本来のchild1ではありません!)。これが私のhtmlセットアップです：

<div id=menu">
     <div class="menu_item">
          <a href="#" class="drop_menu"></a>
           <div id="parent">
              <div class="child1">Child 1 Contents</div>
              <div class="child2">Child 2 Contents</div>
           </div>
           <div id="replacepagelinks">
              <a href="#1">Replace Child 1 with Child 2</a>
              <a href="#2">Replace Child 2 with Child 1</a>
           </div>
     </div>
     <div class="menu_item">
          <a href="#" class="drop_menu"></a>
           <div id="parent">
              <div class="child1">Child 1 Contents</div>
              <div class="child2">Child 2 Contents</div>
           </div>
           <div id="replacepagelinks">
              <a href="#1">Replace Child 1 with Child 2</a>
              <a href="#2">Replace Child 2 with Child 1</a>
           </div>
     </div>
     <div class="menu_item"> etc.. </div>
</div>

各menu_itemを明らかにするためにa href="#" class="drop_menu、メニュードロップjqueryを実行するがあります。a href="#" class="drop_menu"メニュー項目が選択されるたびに child1 が最初に表示されるように、同じリンクで「replace div jquery script」(このページの上部) もリセットする方法はありますか? ありがとうございます。ピア

4

3 に答える 3

0

私が正しく理解している場合は、をクリックしたときにclass=child1とが常に表示され、他の人が非表示になっていることを確認しますか？次に、これでうまくいきます。href=#2drop_menu

$(".drop_menu").on('click', function() {
    $(this).parent().find('.child1, a[href="#2"]').show().siblings().hide();
});
于 2012-10-17T12:23:31.803 に答える
0

同じIDを持つ2つのタグを使用しないでください（#parentと#replacepagelinksを複数回使用する必要があります）。idは一意である必要があります。複数のタグが必要な場合は、クラスがあります。

$('#replacepagelinks a').click(function(){
  $(this).hide().siblings().show()
  var w = this.hash.replace('#', '');
  item = $(this).parents('.menu_item'); /*get the parent .menu_item*/
  $(item).find('.child'+w).show().siblings().hide(); /*find the .child and show it*/
})
于 2012-10-17T12:23:44.127 に答える
0

これはどういう意味ですか？http://jsfiddle.net/KaqZ5/3/

click関数の最初の行を次のように変更しました。

     $('a[href="' + this.hash + '"]').hide().siblings().show()

例：これにより、すべての#1リンクが非表示になり、リンクが表示され#2ます。

于 2012-10-17T12:17:04.107 に答える