Question

当您点击导航中的<a>链接时，定位点似乎错误，因为您无法看到标题部分。在我的情况下<h2>。
是否可以突出显示<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

固定导航栏与您的标题重叠，这就是您说它没有正确显示的原因 - 为了解决此问题，您可以在计算定位点的顶部位置时添加一些额外的50px左右
您需要创建一个名为＆＃34; active＆＃34;的类。或者＆＃34;选择＆＃34;它将包含所需的样式，如： selected{ background-color: silver; color: #fff; }

＆＃13;

var links = $(".page-scroll"); 
links.on('click',function(){ 
  links.removeClass("selected"); 
  $(this).addClass("selected"); 
});

＆＃13;

li{

  list-style-type: none;
}
.page-scroll{
  float:left;
  padding:15px;
  text-align: center;
  background-color: black;
  color: #fff;
}

.selected{
  background-color: silver;
  color: black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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><a class="page-scroll" href="#">Home</a></li>
        <li><a class="page-scroll" href="#ark">Architektur</a></li>
        <li><a class="page-scroll selected" 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>

＆＃13;

然后，您需要在单击导航栏中的锚点时添加此类

Answer 2

我不确切地知道你在第一个问题中的意思，但突出显示<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");
    });
  });

工作小提琴：

JSFiddle

Answer 3

对于问题1，解决方案是 - 将其添加到您的CSS文件中（可以取出3个第一行，因为它们只是我的评论）：

/* FIXES problem:
Navbar hides initial content when jumping to in-page anchor #1768
https://github.com/twbs/bootstrap/issues/1768 */

*[id]:before { 
    display: block; 
    content: " "; 
    margin-top: -75px; 
    height: 75px; 
    visibility: hidden; 
}

Bootstrap Scrolling Nav：修复部分高度和活动菜单突出显示

3 个答案: