前端导航栏不变切换局部页面的3种方法
作者：小黄不辣几
在开发网页的过程中,经常需要实现导航菜单的切换,下面这篇文章主要给大家介绍了关于前端导航栏不变切换局部页面的3种方法,文中给出了详细的代码示例,需要的朋友可以参考下
前言：
在写项目的时候，一直让我很头疼的问题，就是我的项目的导航栏不需要改变，但是点击导航栏需要切换页面。接下来我总结一下我能够想到的方法!
方法一：使用iframe嵌入页面（不推荐）
在当前窗口中使用HTML5提供的iframe标签，可以引入另一个窗口的页面内容
<iframe href="./index.html" rel="external nofollow" ></iframe>
可以通过JS来实现页面的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<style>
.nav{
display: flex;
list-style: none;
}
li{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 0 10px;
background-color:rebeccapurple;
font-size: 18px;
color:#fff
}
</style>
</head>
<body>
<ul class="nav">
<li data-src="./html/page01.html">首页</li>
<li data-src="./html/page02.html">第一页</li>
<li data-src="./html/page03.html">第二页</li>
</ul>
<!-- 使用iframe标签切换 最好src默认值为空-->
<iframe src="" frameborder="0" id="iframe"></iframe>
<script>
//有两种方法，推荐第二种
//方法一
//将地址放在数组中
let arr = ['./html/page01.html','./html/page02.html','./html/page03.html']
//获取iframe标签
let iframe = document.querySelector('#iframe')
//获取导航栏按钮
let lis = document.querySelectorAll('li')
//点击导航栏，改变Iframe的src属性，实现页面切换
for (let i = 0; i < lis.length; i++) {
//绑定点击事件
lis[i].onclick = function(event){
//方法一
// iframe.src = arr[i]
//方法二 自定义属性
iframe.src = event.target.dataset.src
}
}
</script>
</body>
</html>实现效果：
缺点：
1.不利于浏览器搜索引擎的搜索
2.不适合应用在前台系统应用
3.有些浏览器不兼容
优点：
1.简单，只是一个HTML标签
2.常用在网站引入一些广告
iframe其他属性学习：
方法二：利用display属性和排他思想（推荐）
该方法利用的是diplay属性，可以将标签隐藏和显示在页面中
可以通过JS来实现页面的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<style>
.nav{
display: flex;
list-style: none;
}
li{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 0 10px;
background-color:rebeccapurple;
font-size: 18px;
color:#fff
}
.page{
width: 400px;
height: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<ul class="nav">
<li class="first">首页</li>
<li class="second">第一页</li>
<li class="three">第二页</li>
</ul>
<!-- 使用display属性 -->
<div id="page01" class=" page" style="display:block">
<h1>首页</h1>
</div>
<div id="page02" class=" page" style="display:none">
<h1>第一页</h1>
</div>
<div id="page03" class=" page" style="display:none">
<h1>第二页</h1>
</div>
<script>
//使用排他思想
//获取导航栏按钮
let lis = document.querySelectorAll('li')
//获取三个要切换的盒子
let page01 = document.getElementById('page01')
let page02 = document.getElementById('page02')
let page03 = document.getElementById('page03')
//点击导航栏，改变Iframe的src属性，实现页面切换
for (let i = 0; i < lis.length; i++) {
//绑定点击事件
lis[i].onclick = function(event){
if(event.target.classList.contains('first')){
changPage()
page01.style.display = 'block'
}else if(event.target.classList.contains('second')){
changPage()
page02.style.display = 'block'
}else{
changPage()
page03.style.display = 'block'
}
}
}
//封装一个排他思想的函数
function changPage(){
//获取所有page
document.querySelectorAll('.page').forEach(el=>{
el.style.display = 'none'
})
}
</script>
</body>
</html>缺点：
1.所有切换的页面都写在一个页面中，显得代码量很大
2.操作有点子麻烦
优点：
1.没有兼容性问题
实现效果：
方法三：a标签的锚点定位（很推荐）
在前几天逛b站时，看到了一个讲解a标签实现锚点定位的视频，突然灵光一现？啊这可不可以拿来切换页面啊？
真恨啊！！当时写项目时候没有想到这个方法，纯纯用了上面两种方式来实现。
话不多说
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.nav{
display: flex;
width: 500px;
height: 50px;
background-color: aqua;
margin: auto;
}
.box{
width: 500px;
/* 超出部分隐藏 */
overflow: hidden;
margin: auto;
display: flex;
}
.content{
width: 500px;
height: 600px;
flex-shrink: 0;
}
#content1{
background-color: paleturquoise;
}
#content2{
background-color: yellowgreen;
}
#content3{
background-color: peru;
}
</style>
</head>
<body>
<nav>
<div class="nav">
<a href="#content1" rel="external nofollow" id="nav1">首页</a>
<a href="#content2" rel="external nofollow" id="nav2">详情</a>
<a href="#content3" rel="external nofollow" id="nav3">个人中心</a>
</div>
</nav>
<section>
<div class="box">
<div id="content1" class="content">首页</div>
<div id="content2" class="content">详情</div>
<div id="content3" class="content">个人中心</div>
</div>
</section>
</body>
</html>实现效果：
感觉这个方法没有什么缺点，又简单又快，还没用到JS。
总结
到此这篇关于前端导航栏不变切换局部页面的3种方法的文章就介绍到这了,更多相关前端导航栏不变切换局部页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！