导航栏不变 页面切换 最简单的方法

导航栏不变 页面切换 最简单的方法

不久前一个导航栏想的我焦头烂额,碰巧得到了一个项目才知道怎么写的,我这个方法呢就跟插入导入css,js样式差不多。请看下面的图片

创建一个num.html,在里面把你的样式和跳转页面路径写好。如图
导航栏不变 页面切换 最简单的方法_第1张图片
导航栏不变 页面切换 最简单的方法_第2张图片

然后在show.html导入num.html,如图导航栏不变 页面切换 最简单的方法_第3张图片
再去addReal.html导入这个num.html文件,如图
导航栏不变 页面切换 最简单的方法_第4张图片

我们来看看效果,注意我标点的地方
show.html
导航栏不变 页面切换 最简单的方法_第5张图片
addReal.html
导航栏不变 页面切换 最简单的方法_第6张图片
看到了吧,他只是变了路径,导航栏也没变,但是地下的页面变了

这个是num.html的css和一些代码,你们试试吧

num.css

body{
font-family: “楷体”;
margin: 0;
}
.div_show{
width: 100%;
padding: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.ul_show{
padding: 0;
margin: 0;
list-style-type: none;
overflow: hidden;
}
.li_show span{
float: left;
font-size: 20px;
padding-top: 22px;
}
.li_show a{
text-decoration: none;
float: left;
padding: 26px 43px 26px 43px;
cursor: pointer;
}
.li_show a:hover{
background-color: #555555;
transition: all 1s;
color: #FFFFFF;
}
a{
color: #000000;
}
额,这里html发上来直接运行了,不是代码我看看能不能在评论发吧,实在不行,照着上面的图打吧

谢谢

你可能感兴趣的:(导航栏跳转)