使用 jQuery 的选项卡式界面，无法使“当前”选项卡采用不透明度设置

Question

我改编了一个 jQuery 选项卡式界面教程来创建一个用于查看某些图像的界面。活动选项卡的不透明度应为 1，但使用我正在使用的代码，单击时将“当前”类分配给选项卡的“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();

});

Answer 1

问题似乎是这段代码：

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

您正在非当前标签上设置悬停。即使在您更改选项卡的类之后，此悬停仍然存在。因此，您将鼠标悬停在选项卡上，单击它，它会更改为 current 类，然后当您将鼠标悬停在外面时，它会逐渐变回 opacity 0.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/

Answer 2

在我看来，您添加后立即删除了“当前”类：

在此处添加：

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

在此处删除：

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

.find 将找到已包含 class='current' 的上一个选项卡以及您刚刚应用的单击选项卡 class='current'