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

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

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

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

「上部のタブAボタン」をクリックすると、同じように「下部のタブAボタン」もアクティブになるように上下のタブを連動したいと、いろいろいじっているのですが、ボタンを連動すると、「下部のタブAボタン」が「上部のタブAボタン」になってしまうなど、うまく動作せずに困っています・・。

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


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

▽最新の回答へ

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

失礼しました。画像は同じものだと勘違いしていました。

同様に下記のようにご修正ください。

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 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.each(function(){
 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);
 $(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;
});

同じ内容のご質問ですので、ポイントは結構です。キャンセルしていただいてかまいません。

ただこれ、なにかまた変更するときに面倒なことになりそうな気がします。CSS上手く使った方がいい感じになりそうな気もしますね……

追記:

たびたび失礼しました。

これで大丈夫なはずです。

handler.click(function() {
 var anchorName = $(this).attr('href');
 var classJudgment = $(this).children('img').attr('class');
 var targetedTab = handler.filter('[href="'+anchorName+'"]')
 if(classJudgment !== 'active') {
 // タブ画像の切り替え
 $('ul.tab li img.active', target).each(function(){
 var imgOff = $(this).attr('src').replace(/_on/g, "");
 $(this).attr('src',imgOff);
 $(this).removeClass('active');
 })
 targetedTab.each(function(){
 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);
 $(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;
}); 
◎質問者からの返答

早々のご回答ありがとうございました。

こちらこそ、気づかずに申し訳ございませんでした。^^;

いろいろとご相談にのっていただきありがとうございます!


いろいろと頼り切ってしまいましたが、ご協力頂き感謝いたします!

これで寝むれます。^^;


感謝!!

関連質問


●質問をもっと探す●



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