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

时间：2016-12-09 19:35:10

标签： jquery html css twitter-bootstrap

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

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

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

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

3 个答案:

答案 0 :(得分：1)

您遇到问题，因为您不应添加/删除活动类，除非您想要创建某个元素＆＃34; active＆＃34;。因此，第一步不是从＆＃34;活动＆＃34;中删除.active你悬停另一个时的元素。如果您希望.active元素丢失其border-top-color，则需要将其放入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');
  })
});

够好吗？

答案 1 :(得分：0)

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

现在请尝试在点击时添加活动课程。

//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>

答案 2 :(得分：0)

好的，我明白了

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

相关问题
最新问题