📌  相关文章
📜  javascript 添加导航栏链接 - Javascript (1)

📅  最后修改于: 2023-12-03 15:01:45.377000             🧑  作者: Mango

JavaScript 添加导航栏链接 - JavaScript

在网站开发中，导航栏是一个非常重要的组件，它能够帮助用户快速地浏览整个网站的结构和内容。在本篇文章中，我们将介绍如何使用 JavaScript 添加导航栏链接。

1. 准备工作

在开始之前，我们需要准备一些基础的 HTML 和 CSS 代码。我们将使用 Bootstrap 来快速创建一个简单的导航栏，并添加一些链接。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JavaScript 添加导航栏链接</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">导航栏</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>
2. 添加链接

在准备工作中，我们已经创建了一个简单的导航栏，并添加了一些链接。现在，我们的目标是使用 JavaScript 来动态地添加更多的链接。

首先，我们需要通过 DOM API 来获取到需要添加链接的元素。在本例中，我们需要获取到 ID 为 "navbar-collapse" 的 div 元素，并在其中添加链接。

var navbarCollapse = document.getElementById('navbar-collapse');

接下来，我们需要使用 JavaScript 创建一个新的链接元素，以及在其中添加文本内容和 href 属性。

var link = document.createElement('a');
link.textContent = '论坛';
link.href = '#';

然后，我们需要将这个链接元素添加到导航栏中。

var li = document.createElement('li');
li.appendChild(link);

navbarCollapse.children[0].appendChild(li);

最后，我们需要将这些代码包装到一个函数中，并在需要添加链接的时候调用它即可。

function addLink(text, url) {
  var navbarCollapse = document.getElementById('navbar-collapse');

  var link = document.createElement('a');
  link.textContent = text;
  link.href = url;

  var li = document.createElement('li');
  li.appendChild(link);

  navbarCollapse.children[0].appendChild(li);
}

addLink('论坛', '#');
3. 总结

在本篇文章中，我们介绍了如何使用 JavaScript 动态地添加导航栏链接。通过使用 DOM API，我们可以方便地获取到需要操作的元素，并动态地添加新的链接。如果你还没有使用过 JavaScript 来操作 HTML 元素，那么这是一个很好的开始。