javascript - 更改 Bootstrap 导航栏样式

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>

干杯