Question

我尝试用JavaScript更改Bootstrap导航栏的样式，但我不知道它是如何工作的。我可以使用CSS轻松更改样式，但不能使用JavaScript。

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" 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 href="#" class="navbar-brand">HOME</a>
     </div>
         <div class="collapse navbar-collapse" id="bs-nav-demo">
           <ul class="nav navbar-nav">
               <li><a href="#">-</a></li>
               <li><a href="#">-</a></li>
               <li><a href="#">-</a></li>
               <li><a href="#">-</a></li>
               <li><a href="#">-</a></li>
               <li><a href="#">-</a></li>
               <li><a href="#">-</a></li>
           </ul>
     </div>
</nav>

我希望在li悬停时更改颜色，品牌元素的颜色和导航栏的border-bottom。我该怎么办？

Answer 1

这是您开始的基本示例。您应该能够根据代码进行调整。

$("li").hover(
  function () {
    $(this).addClass('hover');
  }, 
  function () {
    $(this).removeClass('hover');
  }
  );

.hover{color:green;
font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<ul>
    <li>Milk</li>
    <li>Bread</li>
    <li>Chips</li>
    <li>Socks</li>
  </ul>

干杯

更改Bootstrap导航栏样式

1 个答案: