导航栏不变，切换局部页面的方法

前言：

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



    
    
    
    首页
    
        .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 < lis.length; i++) {
            //绑定点击事件
            lis[i].onclick = function(event){
                //方法一
                // iframe.src = arr[i]
                //方法二 自定义属性
                iframe.src = event.target.dataset.src
            }
            
        }

实现效果：

导航栏不变，切换局部页面的方法

缺点：

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;
        }
    



    
        
            首页
            详情
            个人中心
        
    
    
        
            首页
            详情
            个人中心

实现效果：

导航栏不变，切换局部页面的方法