I have modified a jQuery tabbed interface tutorial to create a visual gallery for displaying images. The issue I am facing is that even though the 'current' class is applied to the active tab, the opacity remains at .3 instead of changing to 1 when clicked.
I am looking for a solution that does not rely on CSS opacity settings so that it can work across all browsers. As someone who is new to jQuery, any assistance in achieving this effect would be greatly appreciated.
// Getting things started.
function start_tabs() {
// Check if element exists.
if (!$('ul.tabs').length) {
// If not, exit function.
return;
}
// Show 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 tab clicks.
$('ul.tabs a').click(function() {
// Check if tab is not current.
if (!$(this).hasClass('current')) {
// Update current indicator.
$(this).addClass('current').css({opacity: 1}).parent('li').siblings('li')
.find('a.current').removeClass('current').css({opacity: .3}),
// Display target, hide others.
$($(this).attr('href')).fadeIn(300).siblings('div.tab_content').hide();
}
// Remove focus from link.
this.blur();
return false;
});
}
// Start everything up.
$(document).ready(function() {
start_tabs();
});