javascript - 引导导航栏按钮的当前 URL

Question

我有一些带有 Bootstrap 导航栏的简单登录页面。

.block1 {
  width: 100%;
  height: 900px;
  box-shadow: 1px 1px 10px #000;
  margin: 15px;
}

.block2 {
  width: 100%;
  height: 900px;
  box-shadow: 1px 1px 10px #000;
  margin: 15px;
}

.block3 {
  width: 100%;
  height: 900px;
  box-shadow: 1px 1px 10px #000;
  margin: 15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#block1">Block one</a></li>
      <li><a href="#block2">Block two</a></li>
      <li><a href="#block3">Block three</a></li>
    </ul>
  </div>
</nav>

<div class="block1">
  <div class="container">
    <div class="row-fluid">
      There is block one
    </div>
  </div>
</div>

<div class="block2">
  <div class="container">
    <div class="row-fluid">
      There is block two
    </div>
  </div>
</div>

<div class="block3">
  <div class="container">
    <div class="row-fluid">
      There is block three
    </div>
  </div>
</div>

我想添加一个功能，当我按下引导导航栏按钮时跳转到当前页面的一部分。例如:按钮“Block one”跳转到 <div class="block1"> ，“ block 二”跳转到<div class="block2"> ETC。 有什么办法可以做到这一点？一些 JS 或其他东西。

Answer 1

for use inside the page

为每个部分定义一个id，如<div id="block1"...并在 <a> 中使用它标签如<a href="#block1" ...

for external page

在 <a> 中使用它标签如<a href="https://stackoverflow.com/#block1" ...

.block {
  width: 100%;
  height: 900px;
  box-shadow: 1px 1px 10px #000;
  margin: 15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#block1">Block one</a></li>
      <li><a href="#block2">Block two</a></li>
      <li><a href="#block3">Block three</a></li>
    </ul>
  </div>
</nav>

<div id="block1" class="block">
  <div class="container">
    <div class="row-fluid">
      There is block one
    </div>
  </div>
</div>

<div id="block2" class="block">
  <div class="container">
    <div class="row-fluid">
      There is block two
    </div>
  </div>
</div>

<div id="block3" class="block">
  <div class="container">
    <div class="row-fluid">
      There is block three
    </div>
  </div>
</div>