记住并在悬停鼠标悬停后显示以前活动的导航选项卡

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

本文关键字：悬停 活动 导航 选项 显示 鼠标      更新时间：2023-09-26

我在每个主标签（导航标签）下都有几个子标签（导航药丸）。我想在将鼠标悬停在主选项卡上时显示它们，同时在悬停后返回活动主选项卡。

我已经为悬停编写了jquery，但不确定如何返回上一个活动选项卡。问题是在鼠标悬停时，最后一个悬停的选项卡保持活动状态。我的代码在下面给出，其中 

  $('.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();
        //}
    });
当您

完成悬停时，您需要使用一个类来回忆您以前的状态。

$('.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');
});

此外，您还需要添加一个点击事件来删除您的最后一个活动类。

$('.nav-tabs > li > a').click(function () {
    $('.nav-tabs > li.lastActive').removeClass('lastActive');
    $(this).tab('show');
});

像这样的东西:)

相关文章：