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


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

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

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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/07/09 13:34:36
  • 終了:2011/07/09 16:36:49

ベストアンサー

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2302011/07/09 14:21:21

ポイント100pt

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

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

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;
});        
id:mad_papa

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

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

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


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

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


感謝!!

2011/07/09 16:36:32

コメントはまだありません

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

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

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

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