首页 前端知识 导航栏不变,切换局部页面的方法

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

2024-06-03 12:06:42 前端知识 前端哥 304 565 我要收藏

前言:

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

目录:

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博主

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10628.html
标签
评论
发布的文章

vue学习计划

2024-06-08 18:06:08

fastjson1.2.24-RCE漏洞复现

2024-06-08 09:06:33

JsonPath用法详解

2024-06-08 09:06:55

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!