Question

I have adapted a jQuery tabbed interface tutorial to create an interface for viewing some images. The active tab should have an opacity of 1, but with the code I am using the ‘current’ class is assigned to the ‘a’ of the tab when clicked, but the opacity does not change, and remains at .3.

I am hoping I can achieve this effect without using the css opacity settings so that it will work with browsers that don’t support this. I am very new to Jquery any help would be much appreciated.

        // 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

The problem seems to be this code:

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

You are setting hovers on the non-current tabs. This hover remains in place even after you change the class of the tab. So, you hover over the tab, you click it, it changes to class current and then when you hover out, it fades back to opacity .3, despite the new class name; You need do something to handle the hover for all tabs, even the current one.

If you change your hover code to this it should work:

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

Example: http://jsfiddle.net/TLshW/