用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代码就行啦,记住引号 " 要转义噢