還記得並在鼠標懸停后顯示先前處於活動狀態的導航選項卡嗎？

Question

我在每個主標簽（nav-tabs）下都有幾個子標簽（nav-pills）。 我想將它們顯示在懸停在主選項卡上的同時在懸停后返回到活動的主選項卡。

我已經為懸停編寫了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();
        //}
    });

Answer 1

懸停完成后，您將需要使用一個類來調用以前的狀態。

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

另外，您還需要添加一個單擊事件，以刪除lastActive類。

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

像這樣的東西:)