匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

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人5回まで
  • 13歳以上
  • 登録:2014/02/13 13:07:55
  • 終了:2014/02/13 14:04:48

ベストアンサー

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2014/02/13 13:32:01

 動作確認してないです。

<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()
})
匿名質問者

早速のご回答有難うございます。
おかげさまで無事に解決いたしました。

とても助かりました。ありがとうございます。

2014/02/13 14:04:32

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません