Bootstrap:突出显示活动菜单链接

Question

我有这个网站(用Bootstrap) http://sg.nowcommu.myhostpoint.ch/，我需要突出活动的菜单链接(可能通过CSS)。

这是我使用的代码：

<div class="navbar navbar-fixed-top" data-activeslide="1">
    <div class="container">


        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>


        <div class="nav-collapse collapse navbar-responsive-collapse">
            <ul class="nav row">

                <li data-slide="2" class="col-12 col-sm-2"><a id="menu-link-2" href="#slide-2" title="Next Section"> <span class="text">Home</span></a></li>
                <li data-slide="4" class="col-12 col-sm-2"><a id="menu-link-4" href="#slide-4" title="Next Section"> <span class="text">Mental Coaching</span></a></li>
                <li data-slide="5" class="col-12 col-sm-2"><a id="menu-link-5" href="#slide-5" title="Next Section"> <span class="text">Personal Training</span></a></li>
                <li data-slide="6" class="col-12 col-sm-2"><a id="menu-link-6" href="#slide-6" title="Next Section"> <span class="text">Ernährungsberatung</span></a></li>
                <li data-slide="7" class="col-12 col-sm-2"><a id="menu-link-7" href="#slide-7" title="Next Section"> <span class="text">Kontakt</span></a></li>
            </ul>

        </div><!-- /.nav-collapse -->
    </div><!-- /.container -->
</div><!-- /.navbar -->

Answer 1

您可以简单地使用jQuery addClass和removeClass方法。

HTML

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS

li{
  padding: 8px;
}

a{
  text-decoration: none;
  color: #000;
}

a:hover, a:focus{
  color: red;
  text-decoration: none;
  outline: none;
}

.active{
  font-size: 30px;
  color: red;
  border-bottom: 5px solid red;
}

jQuery：

    $(document).ready(function(){
    $('a').click(function(){
        $('a').removeClass("active");
        $(this).addClass("active");
    });
  });

工作小提琴：

JSfiddle

Answer 2

加载Bootstrap CSS后添加自定义CSS文件。

.nav a:hover{
    color: #000;
}

Answer 3

我想你的意思是在悬停

.nav span:hover {
color: red;

}