前端導航欄不變切換局部頁面的3種方法

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

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

前言：

在寫項目的時候，一直讓我很頭疼的問題，就是我的項目的導航欄不需要改變，但是點擊導航欄需要切換頁面。接下來我總結一下我能夠想到的方法!

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

在當前窗口中使用HTML5提供的iframe標簽，可以引入另一個窗口的頁面內容

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

可以通過JS來實現(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標簽切換 最好src默認值為空-->
    <iframe src="" frameborder="0" id="iframe"></iframe>
    <script>

        //有兩種方法，推薦第二種
        //方法一
        //將地址放在數(shù)組中
        let arr = ['./html/page01.html','./html/page02.html','./html/page03.html']
        //獲取iframe標簽
        let iframe = document.querySelector('#iframe')
        //獲取導航欄按鈕
        let lis = document.querySelectorAll('li')
        //點擊導航欄，改變Iframe的src屬性，實現(xiàn)頁面切換
        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>

實現(xiàn)效果：

缺點：

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

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

3.有些瀏覽器不兼容

優(yōu)點：

1.簡單，只是一個HTML標簽

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

iframe其他屬性學習：

HTML <iframe> 標簽

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

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

可以通過JS來實現(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>
        //使用排他思想
        //獲取導航欄按鈕
        let lis = document.querySelectorAll('li')
        //獲取三個要切換的盒子
        let page01 = document.getElementById('page01')
        let page02 = document.getElementById('page02')
        let page03 = document.getElementById('page03')
        //點擊導航欄，改變Iframe的src屬性，實現(xiàn)頁面切換
        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'
                }
            }
            
        }
        //封裝一個排他思想的函數(shù)
        function changPage(){
            //獲取所有page
            document.querySelectorAll('.page').forEach(el=>{
                el.style.display = 'none'
            })
        }
    </script>
</body>
</html>

缺點：

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

2.操作有點子麻煩

優(yōu)點：

1.沒有兼容性問題

實現(xiàn)效果：

方法三：a標簽的錨點定位（很推薦）

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

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

話不多說

代碼實現(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">個人中心</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>

實現(xiàn)效果：