时间戳

首页 > 解决方案 > 如何在Bootstrap的导航栏中点击Java Script中的链接

javascript - 如何在Bootstrap的导航栏中点击Java Script中的链接

问题描述

我有一个导航栏，其中包含指向我网页不同部分的链接，我想要它以便在 JavaScript 中我发出一个命令，然后按下链接并更改网页。

我的导航栏

// Current JavaScript Method (Not Working)
document.getElementById("section2Button").click();
<nav class="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center fixed-top">
  <ul class="navbar-nav">
    <li id="section1Button" class="nav-item">
      <a class="nav-link" href="#section1">Colleges</a>
    </li>
    <li id="section2Button" class="nav-item">
      <a class="nav-link" href="#section2">College Selected</a>
    </li>
    <li id="section3Button" class="nav-item">
      <a class="nav-link" href="#section3">About Me</a>
    </li>
  </ul>
</nav>

标签： javascriptbootstrap-4

解决方案

document.querySelector("#section2Button a").click();

您需要查询标签。您可以将其放入您想要执行的任何功能中。例如，我把这个动作放到一个按钮中。

你可以在这里看到完整的演示。

function your_command() {
   // Fixed query
   document.querySelector("#section2Button a").click();
}
<button onclick="your_command()">Test command</button>

<nav class="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center fixed-top">
  <ul class="navbar-nav">
    <li id="section1Button" class="nav-item">
      <a class="nav-link" href="#section1">Colleges</a>
    </li>
    <li id="section2Button" class="nav-item">
      <a class="nav-link" href="#section2">College Selected</a>
    </li>
    <li id="section3Button" class="nav-item">
      <a class="nav-link" href="#section3">About Me</a>
    </li>
  </ul>
</nav>

<h2 id="section1">Section 1</h2>
<h2 id="section2" style="margin-top: 100px">Section 2</h2>
<h2 id="section3" style="margin-top: 100px">Section 3</h2>

推荐阅读