导航栏失灵（导航栏不变，切换局部页面的方法）
前言：
在写项目的时候 ，一直让我很头疼的问题 ，就是我的项目的导航栏不需要改变 ，但是点击导航栏需要切换页面 。接下来我总结一下我能够想到的方法!
目录：
1.iframe标签嵌入页面+自定义属性
2.利用display属性和排他思想+自定义属性
3.a标签的锚点定位（推荐该方法）
方法一：使用iframe嵌入页面（不推荐）
在当前窗口中使用HTML5提供的iframe标签 ，可以引入另一个窗口的页面内容
<iframe href="./index.html"></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其他属性学习：
HTML <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" id="nav1">首页</a> <a href="#content2" id="nav2">详情</a> <a href="#content3" 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 。
以上是我的总结 ，欢迎各位大佬指点 。不懂的可以call博主
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！