jqueryの「タブ」で、同じタブを上下に配置しています。
サンプル
http://testsitefc2s.web.fc2.com/index-test2.html
(ページ横の「FC2携帯変換閉じる」をクリックしてからお試しください。)
「上部のタブAボタン」をクリックすると、同じように「下部のタブAボタン」もアクティブになるように上下のタブを連動したいと、いろいろいじっているのですが、ボタンを連動すると、「下部のタブAボタン」が「上部のタブAボタン」になってしまうなど、うまく動作せずに困っています・・。
よろしくお願い致します。
失礼しました。画像は同じものだと勘違いしていました。
同様に下記のようにご修正ください。
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; });
早々のご回答ありがとうございました。
こちらこそ、気づかずに申し訳ございませんでした。^^;
いろいろとご相談にのっていただきありがとうございます!
いろいろと頼り切ってしまいましたが、ご協力頂き感謝いたします!
これで寝むれます。^^;
感謝!!