Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

我想添加一个功能，当我按下引导导航栏按钮时，该功能会跳转到当前页面的一部分。例如：button＆＃34; Block one＆＃34;跳转到<div class="block1">，＆＃34; Block 2＆＃34;跳到<div class="block2">等有没有办法做到这一点？一些JS或其他东西。

Answer 1

在页面内使用

为/var/www/Laravel等每个部分定义 ID ，并在<div id="block1"...标记中使用<a>

用于外部页面

在<a href="#block1" ...

等<a>标记中使用它

<a href="https://stackoverflow.com/#block1" ...

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

引导导航栏按钮的当前URL

1 个答案: