jQueryで、2つのTABボタンを同期させる方法?


jqueryの「タブ」で、同じタブを上下に配置しています。

サンプル
http://testsitefc2s.web.fc2.com/index-test.html
(ページ横の「FC2携帯変換閉じる」をクリックしてからお試しください。)

「上部のタブAボタン」をクリックすると、同じように「下部のタブAボタン」もアクティブになるように上下のタブを連動したいと、いろいろいじっているのですがうまくいかず、教えていただけると助かります。

よろしくお願い致します。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/07/09 11:23:15
  • 終了:2011/07/09 12:17:53

ベストアンサー

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数775ベストアンサー獲得回数2302011/07/09 11:52:00

ポイント300pt

imagetabs.jsの

// クリック時の動作
handler.click(function() {
    var classJudgment = $(this).children('img').attr('class');
    if(classJudgment !== 'active') {
        // タブ画像の切り替え
        var imgSrc = $(this).children('img').attr('src').replace(/_on/g, ""); // _onが複数付かないように
        var imgDot = imgSrc.lastIndexOf('.');
        var onSrc = imgSrc.substr(0, imgDot) + '_on' + imgSrc.substr(imgDot, 4);
        $(this).children('img').attr('src',onSrc);
        var imgOff = $('ul.tab li img.active', target).attr('src').replace(/_on/g, "");
        $('ul.tab li img.active', target).attr('src',imgOff);
        $('ul.tab li img.active', target).removeClass('active');
        $(this).children('img').addClass('active');
        // コンテンツの切り替え
        var clickAttr = $(this).attr('href');
        var boxHeight = $('div.tabPanelGroup').height();
        $('div.tabPanelGroup').css('height', boxHeight);
        $('div.tabPanel:visible', target).stop(true, true).hide();
        $('div#' + clickAttr)[conf.animate](conf.duration);
        $('div.tabPanelGroup').css('height', 'auto');
    }
    return false;
});

の部分を以下のとおり変更。

// クリック時の動作
handler.click(function() {
    var anchorName = $(this).attr('href');
    var classJudgment = $(this).children('img').attr('class');
    var targetedTab = handler.filter('[href="'+anchorName+'"]')
    if(classJudgment !== 'active') {
        // タブ画像の切り替え
        var imgSrc = targetedTab.children('img').attr('src').replace(/_on/g, ""); // _onが複数付かないように
        var imgDot = imgSrc.lastIndexOf('.');
        var onSrc = imgSrc.substr(0, imgDot) + '_on' + imgSrc.substr(imgDot, 4);
        targetedTab.children('img').attr('src',onSrc);
        var imgOff = $('ul.tab li img.active', target).attr('src').replace(/_on/g, "");
        $('ul.tab li img.active', target).attr('src',imgOff);
        $('ul.tab li img.active', target).removeClass('active');
        targetedTab.children('img').addClass('active');
        // コンテンツの切り替え
        var clickAttr = $(this).attr('href');
        var boxHeight = $('div.tabPanelGroup').height();
        $('div.tabPanelGroup').css('height', boxHeight);
        $('div.tabPanel:visible', target).stop(true, true).hide();
        $('div#' + clickAttr)[conf.animate](conf.duration);
        $('div.tabPanelGroup').css('height', 'auto');
    }
    return false;
});

 

一応動作確認してます。

id:mad_papa

ご回答ありがとうございます。

教えていただいた内容に変更して試してみたのですが、

上下のボタンが同じように変わりませんでした・・・。

Javascript以外に変更された箇所はございましたでしょうか?

2011/07/09 12:15:25
  • id:mad_papa
    Lhankor_Mhy さんへ

    失礼いたしました。うまくボタンが連動して変更されました!

    ありがとうございました!!

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

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

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

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