Joseph Painadath Joseph Painadath - 4 months ago 15
Javascript Question

Remember and show previously active nav-tab after hover mouseout?

I have few sub-tabs(nav-pills) under every main tab(nav-tabs). And i want to show them on hover over main tab while going back to the active main-tab after hover.

I have written jquery for hover but not sure how to go back to the previous active tab.Problem is that on mouse hover , the last hovered tab stays active.
My code is given below where

$('.nav-tabs > li > a').hover(function () {
//$($(this).attr('href')).show();
$(this).tab('show');
}, function () {
// debugger;
//if ($(this).hasClass('active')) { //if ($(this).parent('li').hasClass('active')) {
// $($(this).attr('href')).show();
//}
//else {
// $($(this).attr('href')).hide();
//}
});

Answer

You will need to use a class to recall your previous state when you are done hovering.

$('.nav-tabs > li > a').hover(function () {
    $('.nav-tabs > li.active').addClass('lastActive');
    $(this).tab('show');
}, function () {
    $('.nav-tabs > li.lastActive').removeClass('lastActive').children('a').tab('show');
});

Something like this :)

Comments