-

上下のタブを連動して動かしたく、JQUERYのプラグイン(tab.js)を触っているのですがうまく動かすことが出来きません。
現在の状態→ tdrop.hippy.jp

初期状態では、
-----------------------------------------
【tab1上On】【tab2上】
 タブ1の内容
【tab1下On】【tab2下】
-----------------------------------------
【tab2上】、もしくは【tab2下】をクリックすると
-----------------------------------------
【tab1上】【tab2上On】
 タブ2の内容
【tab1下】【tab2下On】
-----------------------------------------
と表示されるようにするには、tab.jsをどの様に変更すれば良いのかご教授いただければ幸いです。

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

みんなの回答 2 件

名無しさんの回答

$("img",this)  ← のせいです。クリックした部分のimgしか置き換わっていません。

名無し

ありがとうございます。もしよろしければ、どのように変更すればよいか教えていただければ助かります。

名無しさんの回答

元のコード活かすなら、例えばこんな。
処理ちょっと重いですね。
もっと簡素なコードで同じことできるので、あまりオススメはしないです。

 /* クリック時の処理 */ 
 $("ul.btn_tab li a").click(function(){ 
 
  // 今のul.btn_tab li a.selectedのhrefの値を保持しておく 
  var name1=$("ul.btn_tab li a.selected").attr("href"); 
   
  // 追記 
  var tgt = "a[href=" + $(this).attr("href") + "]"; 
 
  $("a.selected img").attr("src",$("a.selected img").attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); 
  $("ul.btn_tab li a").removeClass("selected"); 
 
  // $(this)を変更 
  $(tgt).addClass("selected"); 
 
  /* クリックした画像はmouseoverで_onが付けられているので、そのままだと_on_onとなり、画像へのパスが通らなくなる。 
  なので、今付いている_onをいったん削除してから再度_onを付け直す */ 
  // $(this)を変更 
  $("img",tgt).attr("src",$("img",tgt).attr("src").replace(/^(.+)_on(\.[a-z]+)$/,"$1$2")); 
  $("img",tgt).attr("src",$("img",tgt).attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1_on$2")); 
  $(name1).hide(); 
 
  // クリックされたul.btn_tab li a.selectedのhrefの値を保持 
  var name2=$("ul.btn_tab li a.selected").attr("href"); 
  $(name2).show(); 
   
  return false; 
 
 })
最終更新日:2012-08-20 (4,646 views)

関連するトピックス

ページ上部に戻る