How to link One page navigation mixed with multiple pages?-CodePudding

I am new to development, so please excuse my lack of knowledge. I am attempting to create a one-page website with multiple pages inside. There is a main page, index.html, that is navigated through sections, but the problem is that when I go into one of the multiple pages, I am unable to return to the index.html. Should I use a href "www.mydomain.com/index.html" to return, or is there another method??

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


 <nav >
          <div >
            <a  href="https://mink.agency/"><img  src="./images/logo.png" alt=""></a>
            <button  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  id="navbarSupportedContent">
              <ul >
                <li >
                  <a  aria-current="page" href="#about">about us.</a>
                </li>
                <li >
                  <a  href="#work">our work.</a>
                </li>       
                <li >
                  <a  href="#team">the team.</a>
                </li>
                <li >
                  <a  href="#our-clients">our clients.</a>
                </li>
                <li >
                  <a  href="#connect">let's connect!</a>
                </li>    
              </ul>       
            </div>
           </div>
        </nav>
        
       <section  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  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  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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

CodePudding user response：

I did.. My navigation bar is in the body tag. Entire code for navigation bar is in nav.html file (without any html or body tag, only the code for navigation bar). In the target page, this goes in the head tag:

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

Then in the body tag, a container is made with an unique id and a javascript block to load the nav.html into the container, as follows:

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

</div>

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

Also you could use JavaScript code to generate the whole nav bar.

For example:

Javascript code:

$(function () {
    var bar = '';
    bar  = '<nav  role="navigation">';
    bar  = '<div >';
    bar  = '<div>';
    bar  = '<ul >';
    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>