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

jQueryで複数タブの独自起動について


同じクラス名で複数のタブを設置したのですが、ボタンを押すと全部のタブが同時に動いてしまいます。
独立した動きにするにはeachとか使えば出来るのかと思ったのですが、いまいち思うように動きません。アドバイス頂きたいです。

下のHTMLコードで量産しています。


$(function(){
$('.tab02 > li').click(function() {
var index = $('.tab02 > li').index(this);
$('.tab_current02 > li').removeClass('current02');
$('.tab_current02 > li').eq(index).addClass('current02')
$('.tab02 > li').removeClass('current02');
$(this).addClass('current02');
return false;
});
});


            <div class="kukaku sanko">

<div class="tab_detail02">
<ul class="tab_current02">
<li class="current02"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="tab_content02">
<ul class="tab02">
<li class="current02"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/09/29 01:28:46
  • 終了:2015/09/29 17:25:52

ベストアンサー

匿名回答1号 No.1

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

 こういう感じでできますが、バグの温床になりそうな……

$('.kukaku').each(function(){
var target = $(this);
  $('.tab02 > li', target).click(function() {
    var index = $('.tab02 > li', target).index(this);
    $('.tab_current02 > li', target).removeClass('current02');
    $('.tab_current02 > li', target).eq(index).addClass('current02')
    $('.tab02 > li', target).removeClass('current02');
    $(this).addClass('current02');
    return false;
  });
});

http://jsfiddle.net/hcubf7a4/

匿名質問者

ありがとうございます。
特にバグなどもなく無事に動作いたしました。

考え方を教えて頂けただけでも凄く助かりました。ありがとうございます。
ベストアンサーとさせて頂き質問を終わらせていただきます。

2015/09/29 17:25:43

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

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

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

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

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