html - Bootstrap 滚动导航 : fix sections height and active menu highlight

Question

1. 当您点击 <a>导航中的链接 anchor 看起来是错误的，因为您看不到该部分的标题。 <h2>就我而言。
2. 可以突出显示 <a>关联？像边框之类的东西...

这是 HTML 代码:

<!-- Fixed navbar -->
<nav id="navbar" class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="page-scroll"><a href="#">Home</a></li>
        <li><a class="page-scroll" href="#ark">Architektur</a></li>
        <li><a class="page-scroll" href="#">Wohnen</a></li>
        <li><a class="page-scroll" href="#ausstattung">Ausstattung</a></li>
        <li><a class="page-scroll" href="#lage">Lage</a></li>
        <li><a class="page-scroll" href="#">Galerie</a></li>
        <li><a class="page-scroll" href="#kontakt">Kontakt</a></li>  
        </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>
<!-- === END NAV === -->

编辑:

Nav Problem

Answer 1

我不明白您在第一个问题中的确切含义，但突出显示了 <a></a>这是代码:

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

工作 fiddle :

JSFiddle