ここから本文です

変数を0にする方法を聞きたいです。(nextの部分の動作を改善したい)

mop********さん

2014/6/1005:48:57

変数を0にする方法を聞きたいです。(nextの部分の動作を改善したい)

今作っているタブパネルについての質問です。
今回聞きたいのはnextの部分のことです。
prevの方は前のコンテンツを表示するのですが、nextの方がindex番号を越えることにより表示されない状態になっています。
( var n = $(".next").index(this)+1;の部分です)
これをコンテンツの番号を越えるとき0に戻したいのですがどうjavascript部分に書けばいいのでしょうか?
javascript部分
$(function() {
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").hide();
$(".content_wrap").eq(num).show();
$("#tab li").removeClass('select');
$(this).addClass('select')
$(".prev").click(function () {
var p = $(".prev").index(this)-1;
$(".content_wrap").hide();
$(".content_wrap").eq(p).show();
$("#tab li").removeClass('select');
$("#tab li").eq(p).addClass('select')
$(".next").click(function () {
var n = $(".next").index(this)+1;
$(".content_wrap").hide();
$(".content_wrap").eq(n).show();
$("#tab li").removeClass('select');
$("#tab li").eq(n).addClass('select')
if (n > 4) { n = 0; }
});
});
});
});
html部分
<body>
<ul id="tab">
<li class="select">タブ1</li>
<li>タブ2</li>
<li>タブ3</li>
<li>タブ4</li>
</ul>
<div class="content_wrap"><a href="#" class="prev">PREV</a>
<a href="#" class="next">NEXT</a>内容1</div>
<div class="content_wrap disnon"><a href="#" class="prev">PREV</a>
<a href="#" class="next">NEXT</a>内容2</div>
<div class="content_wrap disnon"><a href="#" class="prev">PREV</a>
<a href="#" class="next">NEXT</a>内容3</div>
<div class="content_wrap disnon"><a href="#" class="prev">PREV</a>
<a href="#" class="next">NEXT</a>内容4</div>
</body>

閲覧数:
84
回答数:
1

違反報告

ベストアンサーに選ばれた回答

tou********さん

2014/6/1600:14:07

下記の行をタブを開く処理の前に移動すればいいのではないでしょうか?
if (n > 4) { n = 0; }

つまり、こうなります。
var n = $(".next").index(this)+1;
if (n > 4) { n = 0; }
$(".content_wrap").hide();
$(".content_wrap").eq(n).show();
$("#tab li").removeClass('select');
$("#tab li").eq(n).addClass('select')


サンプルページを作ってみました。
緑色の『Run』ボタンをクリックすると実行します。
runnable.com/U522hvSSTQUW5JzI/tab-switcher-for-jquery-and-javascript

なお、タブの枚数を『4』と決め打ちすると応用できないので、
下記のようにしてタブの枚数を自動的に認識するようにしています。
var tabLength = $("#tab li").length;

この回答は投票によってベストアンサーに選ばれました!

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる