1

我是开发新手，所以请原谅我缺乏知识。我正在尝试创建一个包含多个页面的单页网站。有一个主页 index.html，它是通过部分导航的，但问题是当我进入多个页面之一时，我无法返回 index.html。我应该使用href“www.mydomain.com/index.html”返回，还是有其他方法？

     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


 <nav class="navbar navbar-expand-md navbar-light bg-light">
          <div class="container-fluid text-center">
            <a class="navbar-brand" href="https://mink.agency/"><img class="logo" src="./images/logo.png" alt=""></a>
            <button class="navbar-toggler first-button animated-icon1" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span></span><span></span><span></span>
            </button>
            <div class="collapse navbar-collapse " id="navbarSupportedContent">
              <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                  <a class="nav-link " aria-current="page" href="#about">about us.</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#work">our work.</a>
                </li>       
                <li class="nav-item">
                  <a class="nav-link" href="#team">the team.</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#our-clients">our clients.</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#connect">let's connect!</a>
                </li>    
              </ul>       
            </div>
           </div>
        </nav>
        
       <section class="bg-success" id="about">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.

Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
       </section>
       <section id="work">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.

Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
       </section>
       <section id="team">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.

Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
       </section>
       <section class="bg-warning" id="ourclients">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.

Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
       </section>
       <section class="bg-danger" id="connect">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet semper justo, a semper massa efficitur in. Proin hendrerit sem eget gravida porta. Maecenas consectetur magna nec elit auctor, scelerisque malesuada nibh lacinia. Fusce commodo sem a lectus dictum pharetra. Maecenas pretium risus a convallis malesuada. Donec fermentum orci erat, in condimentum lectus varius quis. Suspendisse imperdiet semper iaculis. Nam tellus nisl, fermentum quis lacus molestie, fermentum lobortis urna. Mauris in massa efficitur, ultrices mauris quis, finibus enim. Integer sit amet auctor nunc. Nulla porta suscipit magna, vel facilisis est condimentum ac. Aliquam luctus mi nec diam posuere, eu porta orci suscipit. Fusce eu velit neque. In nec convallis nisl. Praesent rhoncus egestas ipsum, sit amet scelerisque purus hendrerit eget.

Nunc pharetra erat turpis, non tempor velit molestie quis. Curabitur vitae tempor felis. Nulla mollis sodales metus eget eleifend. Fusce tincidunt ante sit amet turpis finibus, volutpat sollicitudin est consectetur. Proin suscipit neque et neque posuere, quis consectetur elit rutrum. Pellentesque hendrerit lobortis justo, nec egestas felis eleifend vel. Aliquam lobortis elementum nisl ac ultricies. Phasellus scelerisque diam ac metus sagittis, eu finibus mauris varius. Maecenas quis iaculis tortor, eu accumsan lectus. Nunc pellentesque justo nec lectus vulputate pretium. Suspendisse justo nulla, interdum sit amet tellus nec, laoreet fringilla libero. Phasellus ut mi aliquet, lacinia ligula eu, blandit ipsum. Integer ac ante dictum, lobortis velit ut, gravida lectus. Suspendisse quis felis quis leo fermentum gravida in in justo.
       </section>
        
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

4

1 回答 1

0

我做到了..我的导航栏在正文标签中。导航栏的整个代码都在nav.html文件中（没有任何 html 或 body 标记，只有导航栏的代码）。在目标页面中，这在 head 标签中：

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

然后在body标签中，用一个唯一的id和一个javascript块制作一个容器，将nav.html加载到容器中，如下：

<!--Navigation bar-->
<div id="nav-placeholder">

</div>

<script>
$(function(){
  $("#nav-placeholder").load("nav.html");
});
</script>
<!--end of Navigation bar-->

您也可以使用 JavaScript 代码生成整个导航栏。

例如：

Javascript代码：

$(function () {
    var bar = '';
    bar += '<nav class="navbar navbar-default" role="navigation">';
    bar += '<div class="container-fluid">';
    bar += '<div>';
    bar += '<ul class="nav navbar-nav">';
    bar += '<li id="home"><a href="home.html">Home</a></li>';
    bar += '<li id="index"><a href="index.html">Index</a></li>';
    bar += '<li id="about"><a href="about.html">About</a></li>';
    bar += '</ul>';
    bar += '</div>';
    bar += '</div>';
    bar += '</nav>';

    $("#main-bar").html(bar);

    var id = getValueByName("id");
    $("#" + id).addClass("active");
});

function getValueByName(name) {
    var url = document.getElementById('nav-bar').getAttribute('src');
    var param = new Array();
    if (url.indexOf("?") != -1) {
        var source = url.split("?")[1];
        items = source.split("&");
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            var parameters = item.split("=");
            if (parameters[0] == "id") {
                return parameters[1];
            }
        }
    }
}

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div id="main-bar"></div>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <%--add this line to generate the nav bar--%>
    <script src="../assets/js/nav-bar.js?id=index" id="nav-bar"></script>
</body>
</html>
于 2022-02-01T11:39:21.743 回答