[英]Remember and show previously active nav-tab after hover mouseout?
我在每个主标签(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();
//}
});
悬停完成后,您将需要使用一个类来调用以前的状态。
$('.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');
});
像这样的东西:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.