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');
}
}
});
ここに私があなたのオリジナルから行ったいくつかの重要な変更があります:
.activeCSS を使用してメニュー項目を非表示にし、クラスを使用して再表示します。これにより、マークアップがきれいになり、スタイルを整えることができます- CSS を使用して、ナビゲーション リンクを完全に非表示にするのではなく、視覚的に無効にします。もちろん、単純に非表示にすることもできますが、それが本当にユーザー ナビゲーションである場合は、リンクをビューから完全に削除するのではなく、単にリンクが適用できないことをユーザーが確認できるようにする必要があります。
- 視覚的に「次へ」の前に「戻る」を配置するようにナビゲーションを再構築しました。本当に削除したい場合は、無効なアンカーの CSS 定義を変更するだけです。
- 代わりにクラスを持つようにリンクを変更しました
考慮すべきその他の最適化:
- ナビゲーション コードの中身をスタンドアロン関数にリファクタリングします。前進する場合も後退する場合もほぼ同じなので、親のメニュー要素と目的の方向を渡すことで、関数をより抽象化することを検討してください。
- http://www.xarg.org/2011/09/jquery-pagination-revised/のような jQuery ページネーション プラグインを使用してくださいあなたが自分でできるよりもよくテストされています。
- ページに 2 つのナビゲーション ブロックがありますが、それぞれに
id競合する属性があります。ids はページ上で一意である必要があります。代わりにそれらをクラスに変更しました。
- メニューに項目が 1 つある場合、または項目がない場合を考えてみましょう。このコードは、これらの状況で窒息します
これを行うにはおそらく他にも多くの方法がありますが、これで始めることができます。さらに読むために、jQuery のドキュメントを熟読することをお勧めします。