如何从一个区域管理几个html导航栏，以避免进入每个html页面并更改导航栏链接? [英] How to manage several html nav bars from one single area in order to avoid going to each html page and changing the nav bar link?

问题描述

我负责管理几个.html页面，这些页面遵循一个相当简单的包含导航栏的引导程序模板.问题是，随着我继续建立更多页面，通常我会重做每个单独的.html页面上的导航栏.

I am responsible for managing several .html pages which follows a rather simple bootstrap template that includes a nav bar. The problem is, as I continue to build out more pages, often times I am going back to redo the nav bar on each individual .html page.

虽然很耗时，但是当我了解前端标记时，我印象中没有其他方法可以管理导航栏.

While very time-consuming, I was under the impression when I learned about front-end markup that there wasn't another way to go about managing your nav bar.

在提出问题之前，我曾尝试搜索该线程，但找不到适合我的线程.

I tried searching for this thread before asking a question, but I wasn't able to find one that hit close to home for me.

我很好奇，有没有一种方法可以管理来自单个点或目标的所有html页面的导航栏，而不必回到每个单独的.html页面并添加必要的更改?如果有人可以推荐一个原始的html/css/js解决方案，那将是很好的选择，如果我不愿意接受任何可能会解决此问题的框架的建议，那么

I am curious, is there a way to manage the nav bar for all your html pages from a single point or destination, without having to go back into each individual .html page and add the necessary changes? It would be nice if someone could recommend a vanilla html/css/js solution, if not I am open to any recommendations for any frameworks that may cater to this problem.

推荐答案

在index.html(或其他要使用它的页面)中添加脚本标签，如下所示:

Add the script tag in index.html (or other page you want to use it) like this:

<script style="text/javascript" src="navLoader.js"></script>

从index.html(或其他将使用导航栏的页面)中删除所有导航栏代码，并替换为:

Delete all the navbar code from index.html (or other pages that will use the navbar) and replaced with:

<div class="navbar-frame"></div>

使用所有导航栏代码创建navbar.html文件:

Create a navbar.html file with all the navbar code:

<!--Header bar!-->
      <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="/index.html">Your Stuff</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="background-header"><a href="#">Test 1</a></li>
            <li class="background-header"><a href="#">Test 2</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle background-header" data-toggle="dropdown" role="button" aria-expanded="false">Projects <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li class="dropdown-header dropdown-divisor">Java</li> 
                <li class="background-header"><a href="/TEXTLAND/Textlandrpg.html">TEXTLAND textual RPG</a></li>
                <li class="divider"></li>
                <li class="dropdown-header dropdown-divisor">HTML5 & Javascript</li>
                <li class="background-header"><a href="#">Another test</a></li>
                <li class="divider"></li>
                <li class="dropdown-header dropdown-divisor">HTML/CSS</li>
                <li class="background-header"><a href="/CSSolarSystem/SolarSystemHTMLCSS.html">CSSolar System</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="background-header">
                <a href="#">Contact
                    <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="background-header"><a href="#">Leave a comment</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

，然后使用此.load方法创建navLoader.js文件:

and then create a navLoader.js file with this .load method:

$(document).ready(function(){
    $("#navbar-frame").load("navbar.html");
});

每次页面完全加载时，它将转到navLoader.js获取navbar.html并将其加载到.navbar-frame div内部.现在，如果您需要在导航栏中进行某些更改，只需更改navbar.html文件. 当然，根据需要更改li标记，这只是一个示例. (使用jQuery)

Every time the page is fully loaded, it will go to navLoader.js get the navbar.html and load it inside the .navbar-frame div. Now, if you need to change something in the navbar, just change the navbar.html file. And of course, change the li tags as you need, this is just an example. (using jQuery)

这篇关于如何从一个区域管理几个html导航栏，以避免进入每个html页面并更改导航栏链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！