前言:
在写项目的时候,一直让我很头疼的问题,就是我的项目的导航栏不需要改变,但是点击导航栏需要切换页面。接下来我总结一下我能够想到的方法!
目录:
1.iframe标签嵌入页面+自定义属性
2.利用display属性和排他思想+自定义属性
3.a标签的锚点定位(推荐该方法)
方法一:使用iframe嵌入页面(不推荐)
在当前窗口中使用HTML5提供的iframe标签,可以引入另一个窗口的页面内容
可以通过JS来实现页面的切换
首页 .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 } //有两种方法,推荐第二种 //方法一 //将地址放在数组中 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 } }
实现效果:
缺点:
1.不利于浏览器搜索引擎的搜索
2.不适合应用在前台系统应用
3.有些浏览器不兼容
优点:
1.简单,只是一个HTML标签
2.常用在网站引入一些广告
iframe其他属性学习:
标签”>HTML 标签
方法二:利用display属性和排他思想(推荐)
该方法利用的是diplay属性,可以将标签隐藏和显示在页面中
可以通过JS来实现页面的切换
首页 .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; } 首页
第一页
第二页
//使用排他思想 //获取导航栏按钮 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 { el.style.display = 'none' }) }
缺点:
1.所有切换的页面都写在一个页面中,显得代码量很大
2.操作有点子麻烦
优点:
1.没有兼容性问题
实现效果:
方法三:a标签的锚点定位(很推荐)
在前几天逛b站时,看到了一个讲解a标签实现锚点定位的视频,突然灵光一现?啊这可不可以拿来切换页面啊?
真恨啊!!当时写项目时候没有想到这个方法,纯纯用了上面两种方式来实现。
话不多说
代码实现:
Document .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; } 首页 详情 个人中心
实现效果:
感觉这个方法没有什么缺点,又简单又快,还没用到JS。
以上是我的总结,欢迎各位大佬指点。不懂的可以call博主