悬停列表项上的Bootstrap导航栏删除活动的类，鼠标输出返回类激活

can you help me how to do realize this situation with the bootstrap navbar. As I wrote in the title, I need to realize when click on list item in navbar menu, current item should get class active and marked with top border, but on hover over other list item, class active (border top also) should disappear from current list item with active class..

你能帮助我如何通过bootstrap导航栏实现这种情况。正如我在标题中所写，我需要意识到当点击导航栏菜单中的列表项时，当前项应该激活类并标记为顶部边框，但是将鼠标悬停在其他列表项上时，类激活（边界顶部也应该）从具有活动类的当前列表项..

Practically, when the mouse is moving over the menu the red line follows the mouse. when the mouse moves away from the menu item, the red line return back above the active menu

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

This is my current code - http://www.bootply.com/uvUwueNuOG

这是我目前的代码 - http://www.bootply.com/uvUwueNuOG

You'll noticed that is Home card active, when hover, active class disappear and move depending on where the mouse is, but when click on another card in menu, nothing happens

您会注意到Home卡处于活动状态，当悬停时，活动类会根据鼠标的位置消失和移动，但是当单击菜单中的另一张卡时，没有任何反应

3 个解决方案

#1

You have problems because you should not add/remove the active class unless you want to make a certain element "active". So, first step is not to remove .active from the "active" element when you hover another. If you want the .active element to lose its border-top-color, you need to put this in your CSS:

您有问题，因为您不应添加/删除活动类，除非您想要使某个元素“活动”。因此，当您悬停另一个元素时，第一步不是从“active”元素中删除.active。如果你想让.active元素失去它的border-top-color，你需要把它放在你的CSS中：

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

Make sure it loads after bootstrap.css or you will need a stronger selector. Now the active item no longer looks active when the menu is hovered. Now, using JavaScript, you can just use the active class as it is supposed to be used: to mark the active element. So when you want to make another element active, you remove it from all elements and apply it to the one you clicked.

确保它在bootstrap.css之后加载，否则你需要一个更强的选择器。现在，当菜单悬停时，活动项目不再处于活动状态。现在，使用JavaScript，您可以使用应该使用的活动类：标记活动元素。因此，当您想要激活另一个元素时，将其从所有元素中删除并将其应用于您单击的元素。

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

Good enough?

够好了？

#2

Ok, I got it

好，我知道了

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

#3

Please Try this... it will open a popup on class remove and class re-adding just for confirmation you can remove alert from there. in this example i used your code just replaced .hover with .mouseenter and for leave .mouseleave

请尝试这个...它会在类删除和类重新添加时打开一个弹出窗口，只是为了确认你可以从那里删除警报。在这个例子中，我使用你的代码刚刚替换.hover和.mouseenter，并用于离开.mouseleave

Please try now this is adding active class on click as well..

请立即尝试这是在点击上添加活动类..

//Add class active on specific list item
$(document).ready(function(){

    var item, elem, makeActive;
    item = '.navbar-nav li.item';

    elem = document.querySelectorAll(item);

    makeActive = function () {
        for (var i = 0; i < elem.length; i++)
            elem[i].classList.remove('active');

            this.classList.add('active');
    };

    for (var i = 0; i < elem.length; i++)
        elem[i].addEventListener('mousedown', makeActive);

    var $home = $(".navbar-default .navbar-nav>.active");
 
    $(".navbar-default .navbar-nav li").mouseenter(function () {
        $home.removeClass("active");
     // alert('active class removed')
    })
	.mouseleave(function () {
        $(this).removeClass("active");
        $home.addClass("active");
      // alert('active class readded')
    });
  
   $(".navbar-nav li").click(function () {
         $(this).addClass("active");
    });
  
});

body {
    font-family: 'Lato', sans-serif;
    color: #3e3e3e;
    background: #f6f6f6;
}

ul {
    list-style: none;
    padding: 0px;
    display: block;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    color: #ffffff;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

p {
    font-size: 17px;
    font-weight: 400;
    line-height: 23px;
}

h3 {
    font-family: 'Lustria', sans-serif;
    text-align: center;
    color: #3e3e3e;
    font-size: 27px;
    line-height: 33px;
    word-wrap: break-word;
}

h4 {
    color: #ffffff;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 21px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

textarea:focus,
input:focus,
input[type]:focus {
    outline: none;
    border: none;
    box-shadow: 0 0 10px #353d4a inset;
}

/********** HEADER ****************/

.navbar-default {
    border: none;
    background: rgba(255, 255, 255, 0.8);
    margin-bottom: 0px;
}

.navbar-brand>img {
    position: relative;
    z-index: 1;
}

.navbar > .container .navbar-brand.shrink {
    height: 52px;
    background: #403f44;
}
.navbar-brand>img.shrink {
    width: 46%;
    margin: 0px auto;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    transition: all 0.6s ease;
}

.navbar > .container .navbar-brand {
    padding: 0px;
    margin: 0px 35px 0px 0px;
    transition: 0s;
}

.navbar-default .navbar-nav li {
    margin-right: 15px;
    position: relative;
    z-index: 0;
}

.navbar-default .navbar-nav>li>a {
    text-transform: uppercase;
    color: #3e3e3e;
    padding: 22px 10px;
    letter-spacing: 0.4px;
    font-size: 20px;
    font-weight: 400;
    border-top: 6px solid transparent;
}

.navbar-default .navbar-nav .item>a.shrink {
    padding: 12px 10px 14px;

}

.nav.navbar-nav .language a.shrink {
    margin-top: 14px;
}

.navbar-default .booking .btn-default.shrink {
    top: 3px;
}

.navbar-default .booking .btn-default a.shrink {
    padding: 12px 22.5px;
    font-size: 16px;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>li>a:hover {
    color: #3e3e3e;
    background: none;
    border-top-color: #ff2a00;
}

.nav.navbar-nav .language a {
    border-top: 0px;
    padding: 0px;
    margin: 27px 18px 0px 20px;
}

.navbar-default .language img {
    margin-right: 26px;
}

.language.dropdown .dropdown-toggle:after {
    content: "\f107";
    font-family: FontAwesome;
    font-size: 40px;
    position: absolute;
    left: 52px;
    top: 4px;
}

.language .dropdown-menu:after {
    content: "\f0d8";
    font-family: FontAwesome;
    color: #ffffff;
    font-size: 40px;
    position: absolute;
    right: 38px;
    top: -34px;
}

.nav.navbar-nav .dropdown-menu li {
    margin-right: 0px;
}

.nav.navbar-nav .dropdown-menu li a {
    margin: 15px 18px;
}

.nav.navbar-nav .dropdown-menu li:last-child a {
    margin-bottom: 10px;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
    background: none;
}

.navbar-default .booking .btn-default,
.navbar-default .booking .btn-default:hover,
.navbar-default .booking .btn-default:focus {
    font-size: 19px;
    border: none;
    padding: 0px;
    outline: 0;
    background: #ff2a00;
    border-radius: 6px;
    position: absolute;
    top: 36px;
}

.navbar-default .booking .btn-default a {
    display: block;
    font-size: 19px;
    text-transform: uppercase;
    color: #ffffff;
    padding: 15.5px 31px;
}

.dropdown-menu {
    top: 134%;
    left: -65%;
}

.navbar-collapse.collapse.in ul {
    text-align: center;
    margin-top: 50px;
}

.navbar-collapse.collapse.in {
    margin-bottom: 25px;
}

.navbar-collapse.collapse.in li a {
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
		 <nav class="navbar navbar-default navbar-fixed-top">
  		  <div class="container">
    	  <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#" title="Logo">
		      	Logo
		      </a> 
		    </div>
	    	<!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="navbar-collapse">
		      <ul class="nav navbar-nav">
		        <li class="item active">
		          <a href="#" title="Home">Home</a>
		        </li>
		        <li class="item">
		          <a href="#" title="Apartments">Apartments</a>
		        </li>
		        <li class="item">
		          <a href="#" title="Rates">Rates</a>
		        </li>
		        <li class="item">
		          <a href="#" title="Location">Location</a>
		        </li>
		        <li class="item">
		          <a href="#" title="Contact">Contact</a>
		        </li>
		       	
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-->
		 </nav>
		</div>

#1

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

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