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

原文由 easy.antonio 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;
}

查询：

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

工作小提琴：

JSfiddle

原文由 Münich 发布，翻译遵循 CC BY-SA 3.0 许可协议