快捷導(dǎo)航

前端導(dǎo)航欄不變切換局部頁面的3種方法

更新時(shí)間：2023年12月27日 10:03:42 作者：小黃不辣幾

在開發(fā)網(wǎng)頁的過程中,經(jīng)常需要實(shí)現(xiàn)導(dǎo)航菜單的切換,下面這篇文章主要給大家介紹了關(guān)于前端導(dǎo)航欄不變切換局部頁面的3種方法,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下

前言：

在寫項(xiàng)目的時(shí)候，一直讓我很頭疼的問題，就是我的項(xiàng)目的導(dǎo)航欄不需要改變，但是點(diǎn)擊導(dǎo)航欄需要切換頁面。接下來我總結(jié)一下我能夠想到的方法!

方法一：使用iframe嵌入頁面（不推薦）

在當(dāng)前窗口中使用HTML5提供的iframe標(biāo)簽，可以引入另一個(gè)窗口的頁面內(nèi)容

<iframe href="./index.html" rel="external nofollow" ></iframe>

可以通過JS來實(shí)現(xiàn)頁面的切換

<!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標(biāo)簽切換 最好src默認(rèn)值為空-->
    <iframe src="" frameborder="0" id="iframe"></iframe>
    <script>

        //有兩種方法，推薦第二種
        //方法一
        //將地址放在數(shù)組中
        let arr = ['./html/page01.html','./html/page02.html','./html/page03.html']
        //獲取iframe標(biāo)簽
        let iframe = document.querySelector('#iframe')
        //獲取導(dǎo)航欄按鈕
        let lis = document.querySelectorAll('li')
        //點(diǎn)擊導(dǎo)航欄，改變Iframe的src屬性，實(shí)現(xiàn)頁面切換
        for (let i = 0; i < lis.length; i++) {
            //綁定點(diǎn)擊事件
            lis[i].onclick = function(event){
                //方法一
                // iframe.src = arr[i]
                //方法二 自定義屬性
                iframe.src = event.target.dataset.src
            }
            
        }
    </script>
</body>
</html>

實(shí)現(xiàn)效果：

缺點(diǎn)：

1.不利于瀏覽器搜索引擎的搜索

2.不適合應(yīng)用在前臺系統(tǒng)應(yīng)用

3.有些瀏覽器不兼容

優(yōu)點(diǎn)：

1.簡單，只是一個(gè)HTML標(biāo)簽

2.常用在網(wǎng)站引入一些廣告

iframe其他屬性學(xué)習(xí)：

HTML <iframe> 標(biāo)簽

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

該方法利用的是diplay屬性，可以將標(biāo)簽隱藏和顯示在頁面中

可以通過JS來實(shí)現(xiàn)頁面的切換

<!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>
        //使用排他思想
        //獲取導(dǎo)航欄按鈕
        let lis = document.querySelectorAll('li')
        //獲取三個(gè)要切換的盒子
        let page01 = document.getElementById('page01')
        let page02 = document.getElementById('page02')
        let page03 = document.getElementById('page03')
        //點(diǎn)擊導(dǎo)航欄，改變Iframe的src屬性，實(shí)現(xiàn)頁面切換
        for (let i = 0; i < lis.length; i++) {
            //綁定點(diǎn)擊事件
            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'
                }
            }
            
        }
        //封裝一個(gè)排他思想的函數(shù)
        function changPage(){
            //獲取所有page
            document.querySelectorAll('.page').forEach(el=>{
                el.style.display = 'none'
            })
        }
    </script>
</body>
</html>

缺點(diǎn)：

1.所有切換的頁面都寫在一個(gè)頁面中，顯得代碼量很大

2.操作有點(diǎn)子麻煩

優(yōu)點(diǎn)：

1.沒有兼容性問題

實(shí)現(xiàn)效果：

方法三：a標(biāo)簽的錨點(diǎn)定位（很推薦）

在前幾天逛b站時(shí)，看到了一個(gè)講解a標(biāo)簽實(shí)現(xiàn)錨點(diǎn)定位的視頻，突然靈光一現(xiàn)？啊這可不可以拿來切換頁面??？

真恨啊??！當(dāng)時(shí)寫項(xiàng)目時(shí)候沒有想到這個(gè)方法，純純用了上面兩種方式來實(shí)現(xiàn)。

話不多說

代碼實(shí)現(xiàn)：

<!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">個(gè)人中心</a>
        </div>
    </nav>
    <section>
        <div class="box">
            <div id="content1" class="content">首頁</div>
            <div id="content2" class="content">詳情</div>
            <div id="content3" class="content">個(gè)人中心</div>
        </div>
    </section>
</body>

</html>

實(shí)現(xiàn)效果：