位置: IT常识 - 正文

导航栏不变,切换局部页面的方法(导航栏不变,切换怎么办)

编辑:rootadmin
导航栏不变,切换局部页面的方法 前言:

推荐整理分享导航栏不变,切换局部页面的方法(导航栏不变,切换怎么办),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:导航栏切换不刷新页面,导航栏不随窗口变化,导航栏没反应,导航栏失灵,导航栏不变,切换页面,导航栏不变,切换局部页面的方法,导航栏不动,导航栏不变,切换局部页面的方法,内容如对您有帮助,希望把文章链接给更多的朋友!

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

目录: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.jiuchutong.com/zhishi/287087.html 转载请保留说明!

上一篇:直布罗陀巨岩上的人行天桥 (© Stephen Ball/Alamy)(直布罗陀巨岩山)

下一篇:9个生活常识小窍门,让你在朋友面前高一等(图文)(生活常识 小常识)

  • 第一张电子处方在包头市“双通道”药店实现医保流转结算

    第一张电子处方在包头市“双通道”药店实现医保流转结算

  • realmebook电池多大(realmex的电池容量)

    realmebook电池多大(realmex的电池容量)

  • 三星手机怎么把手机格式化(三星手机怎么把旧手机转移到新手机)

    三星手机怎么把手机格式化(三星手机怎么把旧手机转移到新手机)

  • qq怎么创群(qq怎么创群聊手机)

    qq怎么创群(qq怎么创群聊手机)

  • 怎么看抖音给我们的标签(怎么看抖音给我们打的标签)

    怎么看抖音给我们的标签(怎么看抖音给我们打的标签)

  • 快手个人背景为什么不显示(快手个人背景怎么改成原来的)

    快手个人背景为什么不显示(快手个人背景怎么改成原来的)

  • 电脑主机漏电是什么情况(电脑主机漏电会电死人吗)

    电脑主机漏电是什么情况(电脑主机漏电会电死人吗)

  • 小写变大写快捷键(小写变大写快捷键v)

    小写变大写快捷键(小写变大写快捷键v)

  • 秘乐短视频可以注销账号吗(秘乐短视频可以提现吗)

    秘乐短视频可以注销账号吗(秘乐短视频可以提现吗)

  • 苹果8plus怎么强制关机重启(苹果8plus怎么强制解锁ID)

    苹果8plus怎么强制关机重启(苹果8plus怎么强制解锁ID)

  • 荣耀30s是双模5g吗(荣耀30s双卡双待都支持5g吗)

    荣耀30s是双模5g吗(荣耀30s双卡双待都支持5g吗)

  • iphone购买日期未验证什么意思(iphone购买日期未验证 知乎)

    iphone购买日期未验证什么意思(iphone购买日期未验证 知乎)

  • 苹果如何不接陌生人电话(iphone怎么拒接陌生人电话)

    苹果如何不接陌生人电话(iphone怎么拒接陌生人电话)

  • 全网通手机支持双4g吗(全网通手机支持广电吗)

    全网通手机支持双4g吗(全网通手机支持广电吗)

  • 蓝牙耳机开机键在哪(pro6蓝牙耳机开机键)

    蓝牙耳机开机键在哪(pro6蓝牙耳机开机键)

  • word2007怎么添加乘号(word2007怎么添加目录)

    word2007怎么添加乘号(word2007怎么添加目录)

  • 收到虎牙科技验证码是怎么回事(虎牙科技是干什么的收费吗)

    收到虎牙科技验证码是怎么回事(虎牙科技是干什么的收费吗)

  • 华为5G手机Mate30发布会时间(华为5g手机mate30pro好不)

    华为5G手机Mate30发布会时间(华为5g手机mate30pro好不)

  • sbc是什么意思(蓝牙音箱sbc是什么意思)

    sbc是什么意思(蓝牙音箱sbc是什么意思)

  • 华为p20怎样截长图(华为p20怎样截长屏图片)

    华为p20怎样截长图(华为p20怎样截长屏图片)

  • 散片cpu和盒装cpu有什么不同(散片cpu和盒装)

    散片cpu和盒装cpu有什么不同(散片cpu和盒装)

  • React Hook - useState函数的详细解析

    React Hook - useState函数的详细解析

  • nodejs安装及环境配置(nodejs安装及环境配置 centos)

    nodejs安装及环境配置(nodejs安装及环境配置 centos)

  • Verilog——任务task的调用(verilog hdl中任务可以调用)

    Verilog——任务task的调用(verilog hdl中任务可以调用)

  • 报废汽车残值收入
  • 月末处理工作主要包括
  • 出口结汇必须要开票吗
  • 残保金滞纳金可以税前扣除吗
  • 金蝶专业版利润表本年累计公式
  • 上季度所得税申报怎么填
  • 网线的税收编码是多少
  • 货车压线行驶怎么处罚
  • 销售货物的运费增值税计入什么科目
  • 预收账款开票怎么做账
  • 资产处置收益结转损益
  • 驻外人员医保报销
  • 个人承担的社保算工资吗
  • 委托收款有什么用
  • 税务小规模定律是什么意思
  • 什么情况下只交城建税不交教育及地方税?
  • 小微企业免征增值税条件
  • 移动网络的费用有哪些
  • 服务业的营业成本怎么算
  • 远期汇票的付款期限可以表示为
  • 营业收入存入银行分录
  • c盘垃圾太多需要重装系统嘛
  • 车船税没有发票能进账吗
  • 个税的适用税率有哪些
  • php数组函数输出《咏雪》里有多少"片"字
  • 上月抵扣的发票怎么开
  • 预提费用是啥
  • 固定资产增加应计入什么
  • sass转化为css
  • input 文件
  • 国内来料加工会亏本吗
  • 微信小程序开发公司
  • js检查json是否合法
  • react中key
  • prompt命令用法
  • python的series
  • python uiautomator2的点击操作
  • 对公账号备用金怎么用
  • 所得税申报表营业成本包括管理费用吗
  • 公转私法人
  • python for循环遍历
  • 佣金代扣代缴增值税如何计算
  • sql server 2016 sp3
  • 购入固定资产款项未付
  • 如何查询继续教育ic卡号
  • 进项税额转出期限是多久
  • 在建工程账务处理会计分录
  • 售后服务期多久
  • 外包人员的餐费怎么入账
  • 外经证核销反馈表写错了怎么办
  • 公司抽奖的成本怎么算
  • 服装店的财务会计怎么做
  • win8蓝屏代码大全
  • ubuntu系统怎样
  • linux系统中用户账户有哪些分类
  • qttask.exe是什么进程?qttask.exe是不是病毒?
  • scanfile.exe
  • win10修改启动
  • win10预览版和正式版
  • 如何在windows沙盒中导入文件
  • win8怎么停止自动更新
  • win10系统怎么设置不锁屏和休眠
  • xp安装盘复制u盘
  • 笔记本触摸屏无法使用了
  • 重装win7系统后鼠标键盘不能用
  • red hat linux怎么用
  • ie10变成ie8
  • jquery跳出循环
  • android 自定义drawable
  • linux source命令是什么
  • python的步骤
  • JAVA的OPENGL,JOGL入门实例----不断变色的点阵 (源代码)
  • Node.js中的什么模块是用于处理文件和目录的
  • 批处理修改hosts 加一行
  • 希尔排序数据结构的代码
  • jqueryui dialog
  • 安卓 crash
  • 海淀区地税局电话
  • 江苏国税局官网
  • 财税[2016]36号文营业税改征增值税试点实施办法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设