Question

我有一个jquery脚本，当选择href =“＃1”时，它会替换div（child1和child2）。我将这些安排在这样的菜单中：

<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 +链接。

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

将child1替换为child2 div，并将a href链接从＃1更改为＃2。在这里，我希望<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的经验非常有限，所以我不确切知道我需要改变什么。

我也有jquery重置div，这样每次通过<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>和<a href="#3">Replace Child 2 with Child 3</a>

3.在child3中，我希望<a href="#3">Replace Child 3 with Child 2</a>和<a href="#4">Replace Child 3 with Child 4</a>

4.在child4中，我希望<a href="#4">Replace Child 4 with Child 3</a>和<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个链接，返回上一页。

感谢您的帮助。 PIA

Answer 1

您可以使用＆gt; http://twitter.github.com/bootstrap/javascript.html#carousel符合您的要求。

Jquery用下一个和后一个链接替换Div

1 个答案: