blocks|key|4477412|text|我知道这是一个相当古老的问题，但是当您有可用的JavaScript时，您可以使用jQuery及其AJAX方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4477413|首先，创建一个包含导航栏的所有HTML内容的页面。|4477414|接下来，使用jQuery的$.get方法获取页面内容。例如，假设您已将所有导航栏的超文本标记语言放入一个名为navigation.html的文件中，并在index.html中添加了一个占位符标记(如<div+id="nav-placeholder">)，然后您将使用以下代码：|offset|length|style|CODE|4477415|<script+src="//code.jquery.com/jquery.min.js"></script>
<script>
$.get("navigation.html",+function(data){
++++$("#nav-placeholder").replaceWith(data);
});
</script>|code-block|syntax|javascript|4477416|entityMap^0|0|0|D|5|1I|F|24|A|2R|Q|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|S|8|@$F|T|G|U|H|I]|$F|V|G|W|H|I]|$F|X|G|Y|H|I]|$F|Z|G|10|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|11|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|P|$]]

<p>I know this is a quite old question, but when you have JavaScript available you could use jQuery and its AJAX methods.</p>

<p>First, create a page with all the navigation bar's HTML content.</p>

<p>Next, use jQuery's <code>$.get</code> method to fetch the content of the page. For example, let's say you've put all the navigation bar's HTML into a file called <code>navigation.html</code> and added a placeholder tag (Like <code>&lt;div id="nav-placeholder"&gt;</code>) in your <code>index.html</code>, then you would use the following code:</p>

<pre><code>&lt;script src="//code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
$.get("navigation.html", function(data){
    $("#nav-placeholder").replaceWith(data);
});
&lt;/script&gt;
</code></pre>


blocks|key|4477447|text|这就是对我有帮助的。我的导航栏在body标签中。导航栏的整个代码都在nav.html文件中(没有任何html或body标签，只有导航栏的代码)。在目标页面中，这放在head标记中：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4477448|<script+src="https://code.jquery.com/jquery-1.10.2.js"></script>|code-block|syntax|javascript|4477449|然后在body标记中，使用一个唯一的id和一个javascript块创建一个容器，以便将nav.html加载到容器中，如下所示：|4477450|
<div+id="nav-placeholder">

</div>

<script>
$(function(){
++$("#nav-placeholder").load("nav.html");
});
</script>
|4477451|entityMap^0|Y|8|2A|4|0|0|18|8|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<p>This is what helped me. My navigation bar is in the body tag. Entire code for navigation bar is in <code>nav.html</code> file (without any html or body tag, only the code for navigation bar). In the target page, this goes in the <code>head</code> tag:</p>

<pre><code>&lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
</code></pre>

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

<pre><code>&lt;!--Navigation bar--&gt;
&lt;div id="nav-placeholder"&gt;

&lt;/div&gt;

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


blocks|key|4476583|text|一种非常古老但足够简单的技术是使用"Server-Side+Includes"，将HTML页面包含到具有.shtml扩展的顶级页面中。例如，这将是您的index.shtml文件：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4476584|<html>
<head>...</head>
<body>



</body>
</html>|code-block|syntax|javascript|4476585|是的，它很差劲，但它是有效的。记住在您的HTTP服务器配置(this+is+how+to+do+it+for+Apache)中启用SSI支持。|4476586|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/Server_Side_Includes|1|https://httpd.apache.org/docs/current/howto/ssi.html^0|1G|6|23|B|H|M|0|0|0|U|V|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|M|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

<p>A very old but simple enough technique is to use <a href="https://en.wikipedia.org/wiki/Server_Side_Includes" rel="nofollow noreferrer">"Server-Side Includes"</a>, to include HTML pages into a top-level page that has the <code>.shtml</code> extension. For instance this would be your <code>index.shtml</code> file:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;...&lt;/head&gt;
&lt;body&gt;
&lt;!-- repeated header: note that the #include is in a HTML comment --&gt;
&lt;!--#include file="header.html" --&gt;
&lt;!-- unique content here... --&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Yes, it is lame, but it works. Remember to enable SSI support in your HTTP server configuration (<a href="https://httpd.apache.org/docs/current/howto/ssi.html" rel="nofollow noreferrer">this is how to do it for Apache</a>).</p>


blocks|key|4476646|text|Brando+ZWZ提供了一些很好的解决方案来处理这种情况。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4476647|回复:多页上的同一导航栏2018年8月21日上午10:13+%7C链接|4476648|据我所知，有多种解决方案。|4476649|例如：|4476650|导航栏的整个代码都在nav.html文件中(没有任何html或body标记，只有导航栏的代码)。|4476651|然后，我们可以直接从jquery加载它，而无需编写大量代码。|4476652|如下所示：|4476653|++++
++++<div+id="nav-placeholder">

++++</div>

++++<script>
++++$(function(){
++++++$("#nav-placeholder").load("nav.html");
++++});
++++</script>
++++|code-block|syntax|javascript|4476654|Solution2：|4476655|您可以使用JavaScript代码来生成整个导航栏。|4476656|4476657|Javascript代码：|4476658|$(function+()+{
++++var+bar+=+'';
++++bar+%2B=+'<nav+class="navbar+navbar-default"+role="navigation">';
++++bar+%2B=+'<div+class="container-fluid">';
++++bar+%2B=+'<div>';
++++bar+%2B=+'<ul+class="nav+navbar-nav">';
++++bar+%2B=+'<li+id="home"><a+href="home.html">Home</a></li>';
++++bar+%2B=+'<li+id="index"><a+href="index.html">Index</a></li>';
++++bar+%2B=+'<li+id="about"><a+href="about.html">About</a></li>';
++++bar+%2B=+'</ul>';
++++bar+%2B=+'</div>';
++++bar+%2B=+'</div>';
++++bar+%2B=+'</nav>';

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

++++var+id+=+getValueByName("id");
++++$("#"+%2B+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%2B%2B)+{
++++++++++++var+item+=+items[i];
++++++++++++var+parameters+=+item.split("=");
++++++++++++if+(parameters[0]+==+"id")+{
++++++++++++++++return+parameters[1];
++++++++++++}
++++++++}
++++}
}|4476659|Html：|4476660|<!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>
++++<%25--add+this+line+to+generate+the+nav+bar--%25>
++++<script+src="../assets/js/nav-bar.js?id=index"+id="nav-bar"></script>
</body>
</html>|4476661|https://forums.asp.net/t/2145711.aspx?Same%2Bnavbar%2Bon%2Bmultiple%2Bpages|offset|length|4476662|entityMap|0|LINK|mutability|MUTABLE|url|https://forums.asp.net/t/2145711.aspx?Same%2Bnavbar%2Bon%2Bmultiple%2Bpages^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|1V|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1J|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1K|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1L|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1M|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1N|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1O|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|1P|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|W|3|M|5|6|7|1R|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1S|8|@]|9|@]|A|$]]|$1|Z|3|10|5|P|7|1T|8|@]|9|@]|A|$Q|R]]|$1|11|3|12|5|6|7|1U|8|@]|9|@]|A|$]]|$1|13|3|14|5|P|7|1V|8|@]|9|@]|A|$Q|R]]|$1|15|3|16|5|6|7|1W|8|@]|9|@$17|1X|18|1Y|1|1Z]]|A|$]]|$1|19|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|1A|$1B|$5|1C|1D|1E|A|$1F|1G]]]]

<p>Brando ZWZ provides some great answers to handling this situation. </p>

<p>Re: Same navbar on multiple pages
Aug 21, 2018 10:13 AM|LINK</p>

<p>As far as I know, there are multiple solution.</p>

<p>For example:</p>

<p>The Entire code for navigation bar is in nav.html file (without any html or body tag, only the code for navigation bar).</p>

<p>Then we could directly load it from the jquery without writing a lot of codes.</p>

<p>Like this:</p>

<pre><code>    &lt;!--Navigation bar--&gt;
    &lt;div id="nav-placeholder"&gt;

    &lt;/div&gt;

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

<p>Solution2:</p>

<p>You could   use JavaScript code to generate the whole nav bar.</p>

<p>Like this:</p>

<p>Javascript code:</p>

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

    $("#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("&amp;");
        for (var i = 0; i &lt; items.length; i++) {
            var item = items[i];
            var parameters = item.split("=");
            if (parameters[0] == "id") {
                return parameters[1];
            }
        }
    }
}
</code></pre>

<p>Html:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="main-bar"&gt;&lt;/div&gt;
    &lt;script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;%--add this line to generate the nav bar--%&gt;
    &lt;script src="../assets/js/nav-bar.js?id=index" id="nav-bar"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><a href="https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages" rel="nofollow noreferrer">https://forums.asp.net/t/2145711.aspx?Same+navbar+on+multiple+pages</a> </p>


blocks|key|4477583|text|在javascript文件中，您可以使用HTML码作为字符串创建一个元素，然后使用insertAdjacentHTML关键字将该变量插入到HTML语言的开头|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4477584|++++var+navbar+=+`+
++++++++<nav>
++++++++++++<div>
++++++++++++++++<a+href="/">
++++++++++++++++++++<div+id="logo">
++++++++++++++++++++++++<img+src="image.png"+alt="Home"+/>
++++++++++++++++++++</div>
++++++++++++++++++++<div>
++++++++++++++++++++++++<img+src="image.png"+alt="Home"+/>
++++++++++++++++++++</div>
++++++++++++++++++++<div+id="tagline">
++++++++++++++++++++++++<img+src="image.png"+alt="Home"+/>
++++++++++++++++++++</div>
++++++++++++++++</a>
++++++++++++</div>
++++++++++++<div>
++++++++++++++++<a+href="/"+class="here">
++++++++++++++++++++Home
++++++++++++++++</a>
++++++++++++++++<a+href="/about.html">About</a>
++++++++++++++++<a+href="/services.html">Services</a>
++++++++++++++++<a+href="/pricing.html">Pricing</a>
++++++++++++++++<a+href="/contact.html">Contact+Us</a>
++++++++++++</div>
++++++++</nav>`;

++++++++//+inserting+navbar+in+beginning+of+body
++++++++document.body.insertAdjacentHTML("afterbegin",+navbar);|code-block|syntax|javascript|4477585|最后，使用以下命令将Javascript文件链接到HTML|4477586|script+src="script.js"></script>|4477587|entityMap^0|15|I|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>In your javascript file you can create a element with the HTML code as string and then insert that variable in the beginning of your HTML using <code>insertAdjacentHTML</code> keyword</p>
<pre class="lang-js prettyprint-override"><code>    var navbar = ` 
        &lt;nav&gt;
            &lt;div&gt;
                &lt;a href=&quot;/&quot;&gt;
                    &lt;div id=&quot;logo&quot;&gt;
                        &lt;img src=&quot;image.png&quot; alt=&quot;Home&quot; /&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                        &lt;img src=&quot;image.png&quot; alt=&quot;Home&quot; /&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;tagline&quot;&gt;
                        &lt;img src=&quot;image.png&quot; alt=&quot;Home&quot; /&gt;
                    &lt;/div&gt;
                &lt;/a&gt;
            &lt;/div&gt;
            &lt;div&gt;
                &lt;a href=&quot;/&quot; class=&quot;here&quot;&gt;
                    Home
                &lt;/a&gt;
                &lt;a href=&quot;/about.html&quot;&gt;About&lt;/a&gt;
                &lt;a href=&quot;/services.html&quot;&gt;Services&lt;/a&gt;
                &lt;a href=&quot;/pricing.html&quot;&gt;Pricing&lt;/a&gt;
                &lt;a href=&quot;/contact.html&quot;&gt;Contact Us&lt;/a&gt;
            &lt;/div&gt;
        &lt;/nav&gt;`;

        // inserting navbar in beginning of body
        document.body.insertAdjacentHTML(&quot;afterbegin&quot;, navbar);
</code></pre>
<p>Lastly link the Javascript file to your HTML using</p>
<pre class="lang-js prettyprint-override"><code>script src=&quot;script.js&quot;&gt;&lt;/script&gt;
</code></pre>


<p>I just finished making my home/index.html page. To keep the nav bar where it is, and have it stay while users click through all my pages. Do I have to copy and paste the nav code to the top of each page? Or is there another way to do so that would look cleaner?</p>

<p>HMTL nav:</p>

<pre><code>&lt;nav&gt;
    &lt;div&gt;
        &lt;a href="/"&gt;
            &lt;div id="logo"&gt;&lt;img src="image.png" alt="Home"/&gt;&lt;/div&gt;
            &lt;div id="headtag"&gt;&lt;img src="image.png" alt="Home"/&gt;&lt;/div&gt;
            &lt;div id="tagline"&gt;&lt;img src="image.png" alt="Home"/&gt;&lt;/div&gt;
        &lt;/a&gt;
    &lt;/div&gt;
    &lt;div&gt; 
        &lt;a href="/" class="here"&gt;Home&lt;/a&gt;
        &lt;a href="/about.html" &gt;About&lt;/a&gt;      
        &lt;a href="/services.html" &gt;Services&lt;/a&gt;          
        &lt;a href="/pricing.html" &gt;Pricing&lt;/a&gt;    
        &lt;a href="/contact.html" &gt;Contact Us&lt;/a&gt;
        &lt;input id="srchbar" type="search" placeholder="Search"&gt;
    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>


How can I reuse a navigation bar on multiple pages?

服务器

容器

jQuery

我刚刚完成了home/index.html页面的制作。使导航栏保持在原来的位置，并在用户单击我的所有页面时使其保持不变。我是否必须将导航代码复制并粘贴到每个页面的顶部？或者，有没有其他看起来更干净的方法呢？HMTL nav：<nav>    <div>        <a href="/">            <d...

问如何在多个页面上重用导航栏？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在多个页面上重用导航栏？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在多个页面上重用导航栏？
EN