我有一个jQuery脚本,当选择href =“#1”时,它替换div(child1和child2)。我有这些安排在菜单中,像这样:Jquery用下一个和后面的链接替换Div
<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()
})
与child2
格取代child1
,也改变了#1〜#2 a 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的经验是非常有限,所以我不知道我需要改变。
我也有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.In child1我想ONLY <a href="#1">Replace Child 1 with Child 2</a>
2.In的child2我想<a href="#2">Replace Child 2 with Child 1</a>
和<a href="#3">Replace Child 2 with Child 3</a>
3.In child3我想<a href="#3">Replace Child 3 with Child 2</a>
和<a href="#4">Replace Child 3 with Child 4</a>
4.In child4我想要<a href="#4">Replace Child 4 with Child 3</a>
和<a href="#5">Replace Child 4 with Child 5</a>
。
5.In child5我想ONLY <a href="#5">Replace Child 5 with Child 4</a>
所以每一页都有,除了它只有一个“下一步”链接,其中只有最后一页第一页一个“未来”和“回”链接'后退'链接。
让事情更复杂:)一些菜单项有2个子div,有些有3个子div,有些有4个子div。在这些情况下,我希望最后一页(分别是2,3和4)只显示1个链接,可以返回上一页。
感谢您的帮助。 Pia