请参阅http://jsfiddle.net/Palpatim/KaqZ5/7/上的更新小提琴
修改后的 HTML：
<div class="menu">
<div class="menu_item">
<div class="parent">
<div class="child1">Child 1 Contents</div>
<div class="child2">Child 2 Contents</div>
<div class="child3">Child 3 Contents</div>
<div class="child4">Child 4 Contents</div>
<div class="child5">Child 5 Contents</div>
</div>
<div class="nav">
<a class="prev" href="#">Back</a>
<a class="next" href="#">Next</a>
</div>
</div>
<div class="menu_item">
<div class="parent">
<div class="child1">Child 1 Contents</div>
<div class="child2">Child 2 Contents</div>
<div class="child3">Child 3 Contents</div>
</div>
<div class="nav">
<a class="prev" href="#">Back</a>
<a class="next" href="#">Next</a>
</div>
</div>
</div>
新的 CSS
/* Initially hide all menu items */
.parent div {
display: none;
}
/* Show active item */
.parent div.active {
display: block;
}
/* If a nav link is disabled, color it grey and set the cursor to an arrow */
a[disabled="disabled"] {
color: #999;
cursor: default;
}
<strong>修改后的JavaScript
// Set the initial menu state: Each 'prev' link is disabled and the first menu item
// for each menu block is active
$('a.prev').attr('disabled', 'disabled');
$('.parent div:first-child').addClass('active');
$('a.next').click(function() {
// Find the parent menu container
// - parent of (this) is div.nav
// - parent of div.nav is div.menu_item
var menu = $(this).parent().parent();
// Find the currently active menu item
var active = $('.active', menu);
// Find the next menu item in the list
var nextItem = active.next();
// If there is a next menu item, make it active
if (nextItem.length) {
// Make current item inactive
active.removeClass('active');
// Make new item active
nextItem.addClass('active');
// If there's no item after the new item,
// disable navigation
if (!nextItem.next().length) {
$('a.next', menu).attr('disabled', 'disabled');
}
// If we just clicked 'next', we can enable the 'prev' button
if ($('a.prev', menu).attr('disabled') == 'disabled') {
$('a.prev', menu).removeAttr('disabled');
}
}
});
// Pretty much same as above, with the directions reversed
$('a.prev').click(function() {
var menu = $(this).parent().parent();
var active = $('.active', menu);
var prevItem = active.prev();
if (prevItem.length) {
active.removeClass('active');
prevItem.addClass('active');
if (!prevItem.prev().length) {
$('a.prev', menu).attr('disabled', 'disabled');
}
if ($('a.next', menu).attr('disabled') == 'disabled') {
$('a.next', menu).removeAttr('disabled');
}
}
});
以下是我对您的原始文件所做的一些重要更改：
- 使用 CSS 隐藏菜单项并使用类重新显示它们
.active。这使标记更清晰，并允许您设置样式
- 使用 CSS 在视觉上禁用导航链接，而不是完全抑制它们。您当然可以简单地隐藏它们，但如果它确实是用户导航，那么您希望他们能够看到该链接根本不适用，而不是从他们的视图中完全删除它。
- 重组了导航，在视觉上将“返回”放在“下一步”之前。如果你真的想删除它，你可以简单地改变禁用锚的 CSS 定义。
- 将您的链接更改为具有类而不是
您应该考虑的其他一些优化：
可能有许多其他方法可以做到这一点，但这应该可以帮助您入门。为了进一步阅读，我建议仔细阅读 jQuery 文档。