javascriptのＣＳＳクラス追加について

質問

今、以下のサイトを参考にしながら、
タブをクリックすると表示内容が変わるというものを作っています。

http://black-flag.net/jquery/20101014-1597.html

サイトにあるように、
ひとつのタブだったらうまく動作できたのですが、
コンテンツの上下にタブをつけたくて、
ＨＴＭＬを以下のように修正し、jsファイルも以下のように修正しました。

クラスをremoveするのは分かったのですが、
★マークのついている行のaddClassの書き方が分かりません。

上のタブが押された場合でも、
下のタブの同じ部分のＣＳＳが変わってほしいのですが。。

ご教授いただけましたら幸いです。
どうぞよろしくお願いいたします。

【ＨＴＭＬ】
≫<a href="javascript:void(0);" class="btn_act active">MENU【１】</a>
≫<a href="javascript:void(0);" class="btn_act">MENU【２】</a>
≫<a href="javascript:void(0);" class="btn_act">MENU【３】</a>

<div id="motion_area1" class="motion">
～MENU【１】クリックでオープンとなるタブエリア要素。～
</div><!--/tab_area1-->

<div id="motion_area2" class="motion">
～MENU【２】クリックでオープンとなるタブエリア要素。～
<img src="img/photo.jpg" />
</div><!--/tab_area2-->

<div id="motion_area3" class="motion">
～MENU【３】クリックでオープンとなるタブエリア要素。～
</div><!--/tab_area3-->

≫<a href="javascript:void(0);" class="btn_act2 active">MENU【１】</a>
≫<a href="javascript:void(0);" class="btn_act2">MENU【２】</a>
≫<a href="javascript:void(0);" class="btn_act2">MENU【３】</a>

【ｊｓファイル】
$(function(){
$("a.btn_act").click(function(){
var connectCont = $("a.btn_act").index(this);
var showCont = connectCont+1;
$('.motion').css({display:'none'});
$('#motion_area'+(showCont)).slideDown('normal');

$('a.btn_act').removeClass('active');
$('a.btn_act2').removeClass('active');
$(this).addClass('active');
$($("a.btn_act2").index(connectCont)).addClass('active'); ←★
});
});

$(function(){
$("a.btn_act2").click(function(){
var connectCont = $("a.btn_act2").index(this);
var showCont = connectCont+1;
$('.motion').css({display:'none'});
$('#motion_area'+(showCont)).slideDown('normal');

$('a.btn_act2').removeClass('active');
$('a.btn_act').removeClass('active');
$(this).addClass('active');
$($("a.btn_act").index(connectCont)).addClass('active'); ←★
});
});

回答No.1

LancerVII · ベストアンサー

こんにちは。

上下でclassを分けるのが面倒だったのでちょっと方法が違いますが、実現してみました。
最終的にはクリックされたメニューと同じ文字列のものにactiveクラスを追加しています。

$('a.btn_act').click(function(){
// クリックしたメニューの位置
var connectCont =
$('a.btn_act').index(this) % ($('a.btn_act').length / 2);
var showCont = connectCont+1;
var text = $(this).text();
$('.motion').css({display:'none'});
$('#motion_area'+(showCont)).slideDown('normal');
$('a.btn_act').removeClass('active').each ( function() {
if ( text === $(this).text() ) {
$(this).addClass('active');
}
});
});

全体のソースは下のサンプルから表示して見てみてください。

==== 動作サンプル
http://hppg.moe.hm/okwave/qa/q7365186/

お礼

なるほど！
ありがとうございます。

こういう書き方もあるんですね、すごく勉強になりました！

質問した行なのですが、
$("a.btn_act2").eq(connectCont).addClass('active');
→こうすることでクラスが追加することができました。

動作サンプルまですぐに作れてしまうなんてすごいです。。
ありがとうございます！