我如何使我的导航栏在我的html中相同？ [英] How can I make my navi-bar the same across my html?

问题描述

每个新页面都必须更新导航面板。这意味着我从页面到页面复制并粘贴我的导航栏。我添加的页面越多，它越难。现在我有不一致的导航栏。所以我在寻找一种方法来制作一个只包含导航条的html文件，然后将其嵌入到我的代码中，就像我使用CSS和JavaScript一样。这样，如果我编辑一个文件，所有其他页面得到更新。如果我使用iframe标签，会遇到很多问题，但我知道没有其他标签可以满足我的需求。所以我该怎么做？我已经做了一些研究，但所有我能找到的是iframe标记。我应该怎么做？

你可以使用JavaScript文件并使用document.write，然后将它放在你想要的地方：

 < script type =text / javascriptsrc =/ js / sidebar.js/> 
  

以下是我的js文件：

  document.write（< div id ='sidebartop'>）; 
 document.write（< p>导航< / p>）; 
 document.write（< / div>）; 
  

如果您想在行内使用双引号和单引号，请注意，我认为<和>标志必须用双引号。以下是我的完整代码：

  ---- / js / sidebar.js ---- 
 document.write （< div id ='sidebartop'>）; 
 document.write（< p>导航< / p>）; 
 document.write（< / div>）; 
 document.write（< div id ='sidebar'>）; 
 if（page == 1）{var p =style ='text-decoration：underline;'} else {var p =style ='text-decoration：normal;'} 
 if（page == 2）{var pp =style ='text-decoration：underline;'} else {var pp =style ='text-decoration：normal;'} 
 if（page = = 3）{var ppp =style ='text-decoration：underline;'} else {var ppp =style ='text-decoration：normal;'} 
 if（page == 4）{ （页面== 5）{var ppppp =var pppp =style ='text-decoration：underline;'} else {var pppp =style ='text-decoration：normal;'} style ='text-decoration：underline;'} else {var ppppp =style ='text-decoration：normal;'} 
 document.write（< p><+'a href = http://brandonc.handcraft.com/'+ p + >家庭和LT; / A>< / p> 中）; 
 document.write（< p><+'a href =http://brandonc.handcraft.com/about'+ pp +>关于作者< / a>< p>中）; 
 document.write（< p><+'a href =http://brandonc.handcraft.com/sevenmages'+ ppp +> The Seven Mages< / a>< p>中）; 
 document.write（< p><+'a href =http://brandonc.handcraft.com/comment'+ pppp +>发表评论< / a>< / p>中）; 
 document.write（< p><+'a href =http://brandonc.handcraft.com/calender'+ ppppp +>日历< / a>< / p> ）; 
 document.write（< / div>）; 
 
 ----你想要代码去的地方---- 
< script> var page = 5< / script> 
< script type =text / javascriptsrc =/ js / sidebar.js/> 
  

可能不是最有效的，我会反对推荐使用PHP，就像其他答案一样，但这适用于我，并且在每个网址后都不需要.php。

With each new page I have to update the navigation panel. Which means I go from page to page copying and pasting my navigation bar. The more pages I add the harder it gets. Now I have in-consistent navigation bars. So what I'm looking for is a way to make an html file that contains only the navigation bar, then embed it into my code, like I'd do with CSS and JavaScript. That way if I edit the one file all other pages get updated. If I use the iframe tag there would be way to many problems, but I know of no other tag that can do what I need. So what should I do? I've done some research but all I can find is the iframe tag.. What should I do?

解决方案

I figured it out myself, you can use a JavaScript file and use document.write then put this where you want it to go:

<script type="text/javascript" src="/js/sidebar.js"/>

Here's my js file:

document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");

If you want to use both double quotes and single quotes inside the line, be careful with that, and I think that the < and > signs have to be in double quotes. Here's my full code:

     ----/js/sidebar.js----
document.write("<div id='sidebartop'>");
document.write("<p>Navigation</p>");
document.write("</div>");
document.write("<div id='sidebar'>");
if (page==1) { var p=" style='text-decoration: underline;'" } else { var p=" style='text-decoration: normal;'" }
if (page==2) { var pp=" style='text-decoration: underline;'" } else { var pp=" style='text-decoration: normal;'" }
if (page==3) { var ppp=" style='text-decoration: underline;'" } else { var ppp=" style='text-decoration: normal;'" }
if (page==4) { var pppp=" style='text-decoration: underline;'" } else { var pppp=" style='text-decoration: normal;'" }
if (page==5) { var ppppp=" style='text-decoration: underline;'" } else { var ppppp=" style='text-decoration: normal;'" }
document.write("<p><"+'a href="http://brandonc.handcraft.com/"'+p+">Home</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/about"'+pp+">About The Author</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/sevenmages"'+ppp+">The Seven Mages</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/comment"'+pppp+">Leave A Comment</a></p>");
document.write("<p><"+'a href="http://brandonc.handcraft.com/calender"'+ppppp+">Calender</a></p>");
document.write("</div>");

     ----In place where you want code to go----
<script>var page=5</script>
<script type="text/javascript" src="/js/sidebar.js"/>

Probably not the most efficient, and I'd defiantly recommend using PHP like in the other answers, but this works for me and doesn't need a .php after every url.

这篇关于我如何使我的导航栏在我的html中相同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！