开发公司导航栏不变，切换局部页面的方法

前言：

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

目录：

1.嵌入页面+开发公司自定义属性

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

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

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

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

<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>
  34.  
  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.不利于浏览器搜索引擎的搜索

        2.不适合应用在前台系统应用

        3.有些浏览器不兼容

优点：

        1.简单，只是一个HTML标签

        2.常用在网站引入一些广告

iframe其他属性学习：

        

方法二：利用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.所有切换的页面都写在一个页面中，显得代码量很大

        2.操作有点子麻烦

优点：

        1.没有兼容性问题

实现效果：

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

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

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

话不多说

代码实现：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  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>
  40.  
  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>
  57.  
  58. </html>

实现效果：

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

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

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发