人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

jQueryのタブについて質問です。

教えていただきたいのですが、今jQueryでタブを実装したページを作っております。
クライアントさんから、タブの中にNEXTとかPREVとかをつけて、そのボタンでページ切り替えも出来るようにしたいと。

これって可能なのでしょうか?
色々調べているのですが、ちょっとわからずご享受いただければと思い質問を出させていただきました。

具体的な記述方法を教えていただけれと思います。宜しくお願いいたします。
今は以下の様なタブ構造になっています。

< ul>
< li>< a href="#tab01">タブの名前< /a>< /li>
< li>< a href="#tab02">タブの名前< /a>< /li>
< /ul>

< div class="area" id="tab01">
ここにタブ1の内容が入ります。
< a href="#tab02">NEXT< /a> ←こんな感じで次のタブへ行きたい
< /div>
< div class="area" id="tab02">
ここにタブ2の内容が入ります。
< a href="#tab01">PREV< /a> ←こんな感じで前のタブへ行きたい
< a href="#tab03">NEXT< /a> ←こんな感じで次のタブへ行きたい
< /div>

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● 匿名回答1号
ベストアンサー

動作確認してないです。

<a href="#" class="prev">PREV< /a>
<a href="#" class="next">NEXT< /a>
$('a.prev').on('click',function(){
 var tab = $('.area:visible');
 tab.hide().prev('.area').show()
})
$('a.next').on('click',function(){
 var tab = $('.area:visible');
 tab.hide().next('.area').show()
})

匿名質問者さんのコメント
早速のご回答有難うございます。 おかげさまで無事に解決いたしました。 とても助かりました。ありがとうございます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ