上下のタブを連動して動かしたく、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;
})
関連するトピックス