0
0

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

前言：

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

目录：

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

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

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

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

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

  1. <iframe href="./index.html"></iframe>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>首页</title>
  8.     <style>
  9.         .nav{
  10.             display: flex;
  11.             list-style: none;
  12.         }
  13.         li{
  14.             width: 100px;
  15.             height: 50px;
  16.             line-height: 50px;
  17.             text-align: center;
  18.             margin: 0 10px;
  19.             background-color:rebeccapurple;
  20.             font-size: 18px;
  21.             color:#fff
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <ul class="nav">
  27.         <li data-src="./html/page01.html">首页</li>
  28.         <li data-src="./html/page02.html">第一页</li>
  29.         <li data-src="./html/page03.html">第二页</li>
  30.     </ul>
  31.     <!-- 使用iframe标签切换 最好src默认值为空-->
  32.     <iframe src="" frameborder="0" id="iframe"></iframe>
  33.     <script>
  35.         //有两种方法，推荐第二种
  36.         //方法一
  37.         //将地址放在数组中
  38.         let arr = ['./html/page01.html','./html/page02.html','./html/page03.html']
  39.         //获取iframe标签
  40.         let iframe = document.querySelector('#iframe')
  41.         //获取导航栏按钮
  42.         let lis = document.querySelectorAll('li')
  43.         //点击导航栏，改变Iframe的src属性，实现页面切换
  44.         for (let i = 0; i < lis.length; i++) {
  45.             //绑定点击事件
  46.             lis[i].onclick = function(event){
  47.                 //方法一
  48.                 // iframe.src = arr[i]
  49.                 //方法二 自定义属性
  50.                 iframe.src = event.target.dataset.src
  51.             }
  52.             
  53.         }
  54.     </script>
  55. </body>
  56. </html>

实现效果：

缺点： 

  1.     1.不利于浏览器搜索引擎的搜索
  3.     2.不适合应用在前台系统应用
  5.     3.有些浏览器不兼容

优点：

  1.     1.简单，只是一个HTML标签
  3.     2.常用在网站引入一些广告

iframe其他属性学习：

  1.     HTML  标签

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>首页</title>
  8.     <style>
  9.         .nav{
  10.             display: flex;
  11.             list-style: none;
  12.         }
  13.         li{
  14.             width: 100px;
  15.             height: 50px;
  16.             line-height: 50px;
  17.             text-align: center;
  18.             margin: 0 10px;
  19.             background-color:rebeccapurple;
  20.             font-size: 18px;
  21.             color:#fff
  22.         }
  23.         .page{
  24.             width: 400px;
  25.             height: 300px;
  26.             border: 1px solid red;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <ul class="nav">
  32.         <li class="first">首页</li>
  33.         <li class="second">第一页</li>
  34.         <li class="three">第二页</li>
  35.     </ul>
  36.     <!-- 使用display属性 -->
  37.     <div id="page01" class=" page" style="display:block"> 
  38.         <h1>首页</h1>
  39.     </div>
  40.     <div id="page02" class=" page" style="display:none">
  41.         <h1>第一页</h1>
  42.     </div>
  43.     <div id="page03" class=" page" style="display:none">
  44.         <h1>第二页</h1>
  45.     </div>
  46.     <script>
  47.         //使用排他思想
  48.         //获取导航栏按钮
  49.         let lis = document.querySelectorAll('li')
  50.         //获取三个要切换的盒子
  51.         let page01 = document.getElementById('page01')
  52.         let page02 = document.getElementById('page02')
  53.         let page03 = document.getElementById('page03')
  54.         //点击导航栏，改变Iframe的src属性，实现页面切换
  55.         for (let i = 0; i < lis.length; i++) {
  56.             //绑定点击事件
  57.             lis[i].onclick = function(event){
  58.                 if(event.target.classList.contains('first')){
  59.                     changPage()
  60.                     page01.style.display = 'block'
  61.                 }else if(event.target.classList.contains('second')){
  62.                     changPage()
  63.                     page02.style.display = 'block'
  64.                 }else{
  65.                     changPage()
  66.                     page03.style.display = 'block'
  67.                 }
  68.             }
  69.             
  70.         }
  71.         //封装一个排他思想的函数
  72.         function changPage(){
  73.             //获取所有page
  74.             document.querySelectorAll('.page').forEach(el=>{
  75.                 el.style.display = 'none'
  76.             })
  77.         }
  78.     </script>
  79. </body>
  80. </html>

缺点：

  1.     1.所有切换的页面都写在一个页面中，显得代码量很大
  3.     2.操作有点子麻烦

优点：

  1.     1.没有兼容性问题

实现效果：

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

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

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

话不多说

代码实现：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <style>
  10.         .nav{
  11.             display: flex;
  12.             width: 500px;
  13.             height: 50px;
  14.             background-color: aqua;
  15.             margin: auto;
  16.         }
  17.         .box{
  18.             width: 500px;
  19.             /* 超出部分隐藏 */
  20.             overflow: hidden;
  21.             margin: auto;
  22.             display: flex;
  23.         }
  24.         .content{
  25.             width: 500px;
  26.             height: 600px;
  27.             flex-shrink: 0;
  28.         }
  29.         #content1{
  30.             background-color: paleturquoise;
  31.         }
  32.         #content2{
  33.             background-color: yellowgreen;
  34.         }
  35.         #content3{
  36.             background-color: peru;
  37.         }
  38.     </style>
  39. </head>
  41. <body>
  42.     <nav>
  43.         <div class="nav">
  44.             <a href="#content1" id="nav1">首页</a>
  45.             <a href="#content2" id="nav2">详情</a>
  46.             <a href="#content3" id="nav3">个人中心</a>
  47.         </div>
  48.     </nav>
  49.     <section>
  50.         <div class="box">
  51.             <div id="content1" class="content">首页</div>
  52.             <div id="content2" class="content">详情</div>
  53.             <div id="content3" class="content">个人中心</div>
  54.         </div>
  55.     </section>
  56. </body>
  58. </html>

实现效果：

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

以上是我的总结，欢迎各位大佬指点。不懂的可以call博主

标签： 前端 html javascript
本文转载自: https://blog.csdn.net/m0_53016870/article/details/126582766
版权归原作者 小黄不辣几 所有， 如有侵权，请联系我们删除。
登录后发布评论

“导航栏不变，切换局部页面的方法”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？