Tabbed interface using jQuery, cannot make 'current' tab take opacitiy setting

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();

});

Jeff B · Accepted Answer · 2010-11-22T18:11:34.427

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/

Works perfectly. Thanks to you both. Great solution. – Barny83 Nov 23 '10 at 14:27 — Barny83, Nov 23 '10 at 14:27

score 0 · Answer 2 · answered Nov 22 '10 at 17:53

0

It looks to me like you remove the 'current' class right after you add it:

Added here:

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

Removed here:

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

The .find will find the previous tab which already has class='current' as well as your clicked-tab which you just applied class='current'

answered Nov 22 '10 at 17:53

n8wrl

19,439
4
63
103

Actually, this line should work because he is making a `sibling` call, so the removal does not affect `$(this)`. – Jeff B Nov 22 '10 at 18:12
@Jeff: Good catch! I love the fluent-syntax but it can get confusing after half a dozen calls! – n8wrl Nov 23 '10 at 13:43

Tabbed interface using jQuery, cannot make 'current' tab take opacitiy setting

2 Answers2