1

我有一个 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+link。

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

替换child1为child2div 并将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>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.In 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 回答