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

Question

mad_papa

12

11もっと見る

300pt

ウェブ制作

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

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

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

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

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

回答の条件

1人5回まで

登録：2011/07/09 11:23:15
終了：2011/07/09 12:17:53

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

mad_papa 2011/07/09 12:17:35

Lhankor_Mhy　さんへ

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

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

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

Lhankor_Mhy · Accepted Answer · 2011-07-09T11:52:00+09:00

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;
});

一応動作確認してます。

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

ベストアンサー

Lhankor_Mhy8142322011/07/09 11:52:00

コメント（1件)

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