Jquery 悬停列表项上的引导导航栏移除类处于活动状态，鼠标悬停时返回类处于活动状态

你能帮助我如何用引导导航栏实现这种情况吗。正如我在标题中所写，我需要意识到，当单击导航栏菜单中的列表项时，当前项应该处于活动状态并用上边框标记，但当鼠标悬停在其他列表项上时，处于活动状态的类（上边框）应该从具有活动类的当前列表项中消失

实际上，当鼠标在菜单上移动时，红线跟随鼠标。当鼠标移离菜单项时，红线返回活动菜单上方

这是我目前的密码-

---

您会注意到主卡处于活动状态，当鼠标悬停时，活动类将消失并根据鼠标的位置移动，但当单击菜单中的另一张卡时，不会发生任何事情，因为除非您想使某个元素处于“活动”状态，否则不应添加/删除活动类。因此，第一步不是在悬停另一个元素时从“active”元素中删除

.active

。如果希望

.active

元素丢失其

边框顶色

，则需要将其放入CSS中：

.navbar-default:hover .navbar-nav>.active:not(:hover) > a {
  border-top-color: transparent;
}

确保它在bootstrap.css之后加载，否则您将需要一个更强大的选择器。现在，当菜单悬停时，

active

项不再显示为

active

。现在，使用JavaScript，您只需按预期使用

active

类即可：标记活动元素。因此，当您想激活另一个元素时，可以将其从所有元素中删除，并将其应用于您单击的元素

$(document).ready(function(){
  $('.navbar-default li').on('click', function(){
    $('.navbar-default li').removeClass('active');
    $(this).addClass('active');
  })
});

---

够好吗？

请试试这个。。。它将在类删除和类重新添加时打开一个弹出窗口，以确认您可以从中删除警报。在本例中，我使用了刚才替换的代码。hover为.mouseenter，for leave.mouseleave

请立即尝试，这也将在单击时添加活动类

//在特定列表项上添加活动类
$（文档）.ready（函数（）{
变量项，元素，使活动；
item='.navbar nav li.item'；
elem=文件查询选择全部（项目）；
makeActive=函数（）{
对于（变量i=0；i.active”）；
$（“.navbar default.navbar nav li”）.mouseenter（函数（）{
$home.removeClass（“活动”）；
//警报（'活动类已删除'）
})
.mouseleave（函数（）{
$（此）.removeClass（“活动”）；
$home.addClass（“活动”）；
//警报（'活动类已读取'）
});
$（“.navbar nav li”）。单击（函数（）{
$（此）.addClass（“活动”）；
});
});
正文{
字体系列：“Lato”，无衬线；
颜色：#3e3e；
背景：#f6f6f6；
}
保险商实验室{
列表样式：无；
填充：0px；
显示：块；
}
A.
a:悬停，
a:焦点{
文字装饰：无；
颜色：#ffffff；
-webkit过渡：所有0.6秒轻松；
-moz转换：所有0.6秒的易用性；
-o型过渡：所有0.6s的轻松度；
过渡期：所有0.6秒缓解；
}
p{
字号：17px；
字体大小：400；
线高：23px；
}
h3{
字体系列：“Lustria”，无衬线；
文本对齐：居中；
颜色：#3e3e；
字体大小：27px；
线高：33px；
单词包装：打断单词；
}
h4{
颜色：#ffffff；
字体大小：25px；
字号：700；
边缘底部：21px；
}
输入[type=“number”]：：-webkit外部旋转按钮，
输入[type=“number”]：：-webkit内部旋转按钮{
-webkit外观：无；
保证金：0；
}
输入[type=“number”]{
-moz外观：textfield；
}
文本区域：焦点，
投入：聚焦，
输入[类型]：焦点{
大纲：无；
边界：无；
盒影：0 0 10px 353d4a插图；
}
/**********标题****************/
.navbar默认值{
边界：无；
背景：rgba（255，255，255，0.8）；
边缘底部：0px；
}
.navbar品牌>img{
位置：相对位置；
z指数：1；
}
.navbar>.container.navbar-brand.shrink{
高度：52px；
背景#403f44；
}
.navbar品牌>图像收缩{
宽度：46%；
保证金：0px自动；
-webkit过渡：所有0.6秒轻松；
-moz转换：所有0.6秒的易用性；
-o型过渡：所有0.6s的轻松度；
过渡期：所有0.6秒缓解；
}
.navbar>.container.navbar品牌{
填充：0px；
保证金：0px 35px 0px 0px；
转换：0s；
}
.navbar默认值.navbar导航li{
右边距：15px；
位置：相对位置；
z指数：0；
}
.navbar默认值.navbar nav>li>a{
文本转换：大写；
颜色：#3e3e；
填充：22px 10px；
字母间距：0.4px；
字体大小：20px；
字体大小：400；
边框顶部：6px实心透明；
}
.navbar默认值.navbar导航项>a.shrink{
填充：12px 10px 14px；
}
.导航，导航栏-导航语言a{
边缘顶部：14px；
}
.navbar default.booking.btn-default.shrink{
顶部：3px；
}
.navbar默认值.booking.btn默认值a.shrink{
填充：12px22.5px；
字体大小：16px；
}
.navbar默认值.navbar nav>.active>a，
.navbar默认值.navbar nav>.active>a:焦点，
.navbar默认值.navbar nav>.active>a:悬停，
.navbar默认值.navbar导航>li>a:悬停{
颜色：#3e3e；
背景：无；
边框顶部颜色：#ff2a00；
}
.nav.navbar-nav.language a{
边框顶部：0px；
填充：0px；
利润率：27px 18px 0px 20px；
}
.navbar默认值.language img{
右边距：26px；
}
.language.dropdown.dropdown切换：之后{
内容：“\f107”；
字体系列：Fontsome；
字体大小：40px；
位置：绝对位置；
左：52px；
顶部：4px；
}
.语言.下拉菜单：之后{
内容：“\f0d8”；
字体系列：Fontsome；
颜色：#ffffff；
字体大小：40px；
位置：绝对位置；
右：38px；
顶部：-34px；
}
.nav.navbar-nav.下拉菜单li{
右边距：0px；
}
.nav.navbar-nav.下拉菜单