使用 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，然后当您将鼠标悬停时，它会淡回到不透明度 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' 的上一个选项卡以及您刚刚单击的选项卡应用类='当前'