0

我改编了一个 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();

});

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

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

在此处添加：

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

此处删除：

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

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

于 2010-11-22T17:53:54.833 回答