用html 调用简单js制作互相跳转导航栏

最新推荐文章于 2024-05-22 13:34:30 发布

_k.o

最新推荐文章于 2024-05-22 13:34:30 发布

阅读量1w

点赞数 4

分类专栏： html+js 文章标签：前端

本文链接：https://blog.csdn.net/weixin_41238001/article/details/84922729

版权

html+js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

转载请标明转载出处小k.o博客：https://blog.csdn.net/weixin_41238001/article/details/84922729

用html 调用简单js制作互相跳转导航栏

我为什么要写这篇文章呢，因为有一个小系统，需要用到一个比较大的导航栏，一大堆跳转，笔者又不想要让每一个html页面都有这些 href
网上找了一大堆，就是没有我想要的效果。于是写了这一篇博客分享，不足之处，希望指出赐教。
话不多说，直接上代码（如果你时间比较紧张，直接跳到第三看也可以）
（而且写者也建议你看第三后在回来复制粘贴第一，第二的代码，运行，感受下）

一、这是常规的导航栏制作，也是最冗余的方法

menu_1.html 代码如下(总共有两个html代码噢)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>共享导航栏</title>
    <link rel="stylesheet" type="text/css" href="nav.css" />
</head>
<body>
		<div class="nav">
			<p><a id="menu_1" href="menu_1.html">菜单一</a></p>
			<p><a id="menu_2" href="menu_2.html">菜单二</a></p>
		</div>
		<div class="content_1">跳转到第一个菜单栏下的内容</div>
</body>
</html>

menu_2.html 代码如下(总共有两个html代码噢)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>共享导航栏</title>
    <link rel="stylesheet" type="text/css" href="nav.css" />
</head>
<body>
		<div class="nav">
			<p><a id="menu_1" href="menu_1.html">菜单一</a></p>
			<p><a id="menu_2" href="menu_2.html">菜单二</a></p>
		</div>
		<div class="content_2">跳转到第二个菜单栏下的内容</div>
</body>
</html>

nav.css 代码如下(css于html在同一个目录下就行了噢或者你可以自己修改)：

.nav{
	width:100%;
	height:150px;
	background:#3385ff;
}
.nav a{
	width:50%;
	height:150px;
	line-height:150px;
	font-size:40px;
	color:#ffffff;
	float:left;
	text-align:center;
	text-decoration:none;
}

.content_1{
	width:100%;
	height:200px;
	font-size:50px;
	text-align:center;
	line-height: 200px;
	color:chartreuse;
}

.content_2{
	width:100%;
	height:200px;
	font-size:50px;
	text-align:center;
	line-height: 200px;
	color:orangered;
}

运行效果：

图一：
图二：

二、采用 html + js 调用，当导航栏多到一定程度，用第一种方法就不行了，很累赘，因为第一种方法把每一个 href 都放进来，假如这个导航栏代码有100行，那么你每一个html就需要有 100 行同样的代码，会显得很累赘。第二种方法就是教你如何把这100行变成 2~3行代码就行

menu_1.html 代码如下(总共有两个html代码噢)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>共享导航栏</title>
    <link rel="stylesheet" type="text/css" href="nav.css" />
    <script src="nav.js" type="text/javascript"></script>
</head>
<body onload="Rendering();">
		<div id="nav"></div>   <!-- 导航栏通过js渲染，js代码在nav.js里 -->
		<div class="content_1">跳转到第一个菜单栏下的内容</div>
</body>
</html>

menu_2.html 代码如下(总共有两个html代码噢)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>共享导航栏</title>
    <link rel="stylesheet" type="text/css" href="nav.css" />
    <script src="nav.js" type="text/javascript"></script>
</head>
<body onload="Rendering();">
		<div id="nav"></div>   <!-- 导航栏通过js渲染，js代码在nav.js里 -->
		<div class="content_2">跳转到第二个菜单栏下的内容</div>
</body>
</html>

nav.js 代码如下(js于html在同一个目录下就行了噢或者你可以自己修改)：

function Rendering(){
   document.getElementById("nav").innerHTML="\t\t<div class=\"nav\">\n" +
       "\t\t\t<p><a id=\"menu_1\" href=\"menu_1.html\">菜单一</a></p>\n" +
       "\t\t\t<p><a id=\"menu_2\" href=\"menu_2.html\">菜单二</a></p>\n" +
       "\t\t</div>";
}

nav.css 代码如下(css于html在同一个目录下就行了噢或者你可以自己修改)：

.nav{
	width:100%;
	height:150px;
	background:#3385ff;
}
.nav a{
	width:50%;
	height:150px;
	line-height:150px;
	font-size:40px;
	color:#ffffff;
	float:left;
	text-align:center;
	text-decoration:none;
}

.content_1{
	width:100%;
	height:200px;
	font-size:50px;
	text-align:center;
	line-height: 200px;
	color:chartreuse;
}

.content_2{
	width:100%;
	height:200px;
	font-size:50px;
	text-align:center;
	line-height: 200px;
	color:orangered;
}

运行效果：

图一：
图二：

三、或许看官还没看出什么区别，我再次说明下区别在哪里咯

方法二与方法一中的 nav.css保持不变
方法二比方法一多了一个nav.js

function Rendering(){
  document.getElementById("nav").innerHTML="\t\t<div class=\"nav\">\n" +
      "\t\t\t<p><a id=\"menu_1\" href=\"menu_1.html\">菜单一</a></p>\n" +
      "\t\t\t<p><a id=\"menu_2\" href=\"menu_2.html\">菜单二</a></p>\n" +
      "\t\t</div>";
}
**其实nav.js只是调用了一个js中的功能，就是获取html中的 id 然后在这个 id 中添加 html 代码，
这个代码就是 方法一的html代码，不过是添加了反 '\\'  这个字符，因为js要将 引号字符 " 转义。
（笔者建议用 IDEA操作，直接复制 html代码块到 js ,IDEA自己就会将引号字符 " 转义）**

function Rendering(){
  document.getElementById("nav").innerHTML="";
}
用这个函数，document,getElementById("nav")  获取你调用该js函数的id
然后在   innerHTML="",加入你要添加的  html代码就行啦，记住引号 " 要转义噢

方法二中menu_1.html(menu_2.html)的区别

方法一的html：
 <div class="nav">
 	<p><a id="menu_1" href="menu_1.html">菜单一</a></p>
 	<p><a id="menu_2" href="menu_2.html">菜单二</a></p>
 </div>
 
 方法二的html:
 <div id="nav"></div>   <!-- 导航栏通过js渲染，js代码在nav.js里 -->
 
 方法一中的代码放进 方法二的nav.js，然后用  <div id="nav"></div> 调用js渲染即可
 不管你的 导航栏有多少代码都可以用这个办法，如果的导航栏有其他js代码
 记得一起放过来  nav.js噢（切记，一定要放在同一个nav.js中，不然会出错！）

_k.o

关注

4
点赞
踩
58

收藏

觉得还不错? 一键收藏
2
评论
用html 调用简单js制作互相跳转导航栏

用html 调用简单js制作互相跳转导航栏我为什么要写这篇文章呢，因为有一个小系统，需要用到一个比较大的导航栏，一大堆跳转，笔者又不想要让每一个html页面都有这些 href网上找了一大堆，就是没有我想要的效果。于是写了这一篇博客分享，不足之处，希望指出赐教。话不多说，直接上代码（如果你时间比较紧张，直接跳到第三看也可以）（而且写者也建议你看第三后在回来复制粘贴第一，第二的代码，运行，感...
复制链接

扫一扫