人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

●質問者: mad_papa
●カテゴリ:ウェブ制作
✍キーワード:FC2 jQuery つの アクティブ クリック
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Lhankor_Mhy
●300ポイント ベストアンサー

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

一応動作確認してます。

◎質問者からの返答

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ