前言：

在写项目的时候，一直让我很头疼的问题，就是我的项目的导航栏不需要改变，但是点击导航栏需要切换页面。接下来我总结一下我能够想到的方法!

目录：

1.iframe标签嵌入页面+自定义属性

2.利用display属性和排他思想+自定义属性

3.a标签的锚点定位（推荐该方法）

方法一：使用iframe嵌入页面（不推荐）

在当前窗口中使用HTML5提供的iframe标签，可以引入另一个窗口的页面内容

 可以通过JS来实现页面的切换

                首页            .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        }        

• 首页
• 第一页
• 第二页

//有两种方法，推荐第二种 //方法一 //将地址放在数组中 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

实现效果：

缺点： 

        1.不利于浏览器搜索引擎的搜索

        2.不适合应用在前台系统应用

        3.有些浏览器不兼容

优点：

        1.简单，只是一个HTML标签

        2.常用在网站引入一些广告

iframe其他属性学习：

         标签">HTML 标签

方法二：利用display属性和排他思想（推荐）

该方法利用的是diplay属性，可以将标签隐藏和显示在页面中

可以通过JS来实现页面的切换

                首页            .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;        }        

• 首页
• 第一页
• 第二页

首页

第一页

第二页

//使用排他思想 //获取导航栏按钮 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 { el.style.display = 'none' }) }

缺点：

        1.所有切换的页面都写在一个页面中，显得代码量很大

        2.操作有点子麻烦

优点：

        1.没有兼容性问题

实现效果：

方法三：a标签的锚点定位（很推荐）

在前几天逛b站时，看到了一个讲解a标签实现锚点定位的视频，突然灵光一现？啊这可不可以拿来切换页面啊？

真恨啊！！当时写项目时候没有想到这个方法，纯纯用了上面两种方式来实现。

话不多说

代码实现：

                Document            .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;        }                            首页            详情            个人中心                                    首页            详情            个人中心            

实现效果：

感觉这个方法没有什么缺点，又简单又快，还没用到JS。