0

一部の画像を表示するためのインターフェイスを作成するために、jQueryタブ付きインターフェイスチュートリアルを採用しました。アクティブなタブの不透明度は1である必要がありますが、使用しているコードでは、クリックすると「current」クラスがタブの「a」に割り当てられますが、不透明度は変更されず、0.3のままです。

これをサポートしていないブラウザで動作するように、cssの不透明度設定を使用せずにこの効果を達成できることを望んでいます。私はJqueryに非常に慣れていないので、助けていただければ幸いです。

        // Initialize.
function init_tabs() {

// Does element exist?
if (!$('ul.tabs').length) {

// If not, exit.
return;
}

// Reveal initial content area(s).
$('div.tab_content_wrap').each(function() {
$(this).find('div.tab_content:first').show();
});

$('ul.tabs a').css({ opacity: .3 });
$('ul.tabs a.current').css({ opacity: 1 });

$('ul.tabs a:not(.current)').hover(
function () {
$(this).fadeTo("fast", 1);
},
function () {
$(this).fadeTo("fast", .3);
}
);

// Listen for click on tabs.
$('ul.tabs a').click(function() {

// If not current tab.
if (!$(this).hasClass('current')) {

// Change the current indicator.
$(this).addClass('current').css({opacity: 1}).parent('li').siblings('li')
.find('a.current').removeClass('current').css({opacity: .3}),


// Show target, hide others.
$($(this).attr('href')).fadeIn(300).siblings('div.tab_content').hide();
}

// Nofollow.
this.blur();
return false;
});
 }

// Kick things off.
$(document).ready(function() {
init_tabs();

}）;

4

2 に答える 2

1

問題はこのコードのようです：

$('ul.tabs a:not(.current)').hover(
    function () {
        $(this).fadeTo("fast", 1);
    },
    function () {
        $(this).fadeTo("fast", .3);
    }
);

現在以外のタブにホバーを設定しています。このホバーは、タブのクラスを変更した後もそのまま残ります。したがって、タブにカーソルを合わせてクリックすると、クラスに変わり、currentカーソルを合わせると、新しいクラス名にもかかわらず、不透明度.3にフェードバックします。現在のタブも含め、すべてのタブのホバーを処理するために何かを行う必要があります。

ホバーコードをこれに変更すると、機能するはずです。

$('ul.tabs a').hover(
    function () {
        if(!$(this).hasClass("current")) {
            $(this).fadeTo("fast", 1);
        }
    },
    function () {       
        if(!$(this).hasClass("current")) {
            $(this).fadeTo("fast", .3);
        }
    }
);

例： http： //jsfiddle.net/TLshW/

于 2010-11-22T18:01:30.117 に答える
0

追加した直後に「current」クラスを削除したように見えます。

ここに追加：

$(this).addClass('current').

ここで削除：

.find('a.current').removeClass('current')...

.findは、class ='current'が既にある前のタブと、class='current'を適用したクリックしたタブを検索します。

于 2010-11-22T17:53:54.833 に答える