1

href = "＃1"が選択されたときにdiv（child1をchild2に）を置き換えるjqueryスクリプトがあります。私はこれらを次のようなメニューに配置しました：

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

jqueryは次のとおりです。

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

これにより、適切なdiv+linkが非表示になります。

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

これはdivに置き換えchild1られ、リンクも＃1から＃2に変更されます。ここでは、別々のクラスに入れて、ページの両側で「次へ」および「戻る」リンクとして機能させることができるようにしたいと思います。child2a href<a href="#1">Replace Child 1 with Child 2</a><a href="#2">Replace Child 2 with Child 1</a>

<div id="replacepagelinks">
    <div class="pagelink_left">
       <a href="#2">Back</a>
    </div>
    <div class="pagelink_right">
       <a href="#1">Next</a>
    </div>
    <div class="clear"></div>
</div>

しかし、jqueryの使用経験は非常に限られているため、何を変更する必要があるのか​​正確にはわかりません。

私はまた、divをリセットするjqueryを持っているので、それを介し <a href="#" class="drop_menu"></a>てメニュー項目が選択されるたびに、常に最初child1に表示され、次の正しいリンクが表示されchild2ます。

$(".drop_menu").on('click', function() {
    $(this).parent().find('.child1, a[href="#2"]').show().siblings().hide();
});

私の主な質問は、2つ以上のdivの子を持つことができるようにしたいのですが、それを反映するようにjqueryを更新する方法がわからないということです。

1.child1では私だけが欲しい<a href="#1">Replace Child 1 with Child 2</a>

2.child2で<a href="#2">Replace Child 2 with Child 1</a>ANDが欲しい<a href="#3">Replace Child 2 with Child 3</a>

3.child3では<a href="#3">Replace Child 3 with Child 2</a>ANDが欲しい<a href="#4">Replace Child 3 with Child 4</a>

4.child4で<a href="#4">Replace Child 4 with Child 3</a>ANDが欲しい<a href="#5">Replace Child 4 with Child 5</a>です。

5.child5では私だけが欲しい<a href="#5">Replace Child 5 with Child 4</a>

したがって、「次へ」リンクしかない最初のページと「戻る」リンクしかない最後のページを除いて、各ページには「次へ」と「戻る」リンクがあります。

さらに複雑にするために:)一部のメニュー項目には2つの子divがあり、一部には3つの子divがあり、一部には4つの子divがあります。このような場合、最後のページ（それぞれ2、3、4）に、前のページに戻るリンクを1つだけ表示したいと思います。

ご協力いただきありがとうございます。ピア

4

1 に答える 1

0

要件に応じて、> http://twitter.github.com/bootstrap/javascript.html#carouselを使用できます。

于 2012-10-22T06:31:47.240 に答える