Foreword:
When writing a project, the problem that has always given me a headache is that the navigation bar of my project does not need to be changed, but clicking the navigation bar needs to switch pages. Next, I will summarize the methods I can think of!
Table of contents:
1.iframe tag embedded page + custom attribute
2. Use display attributes and exclusive ideas + custom attributes
3. Anchor positioning of tags (recommended method)
Method 1: Use iframe to embed the page (not recommended)
Use the iframe tag provided by HTML5 in the current window to import the page content of another window
<iframe href="./index.html"></iframe>Page switching can be achieved through 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>Realize the effect:
shortcoming:
1. It is not conducive to the search of browser search engines
2. Not suitable for application in the foreground system
3. Some browsers are not compatible
advantage:
1. Simple, just an HTML tag
2. Commonly used to introduce some advertisements on the website
Other attributes of iframe learning:
Method 2: Use display attributes and exclusive ideas (recommended)
This method uses the diplay attribute, which can hide and display labels on the page
Page switching can be achieved through 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>Disadvantages :
1. All switching pages are written in one page, which seems to have a large amount of code
2. The operation is a bit troublesome
Advantages :
1. No compatibility issues
Realize the effect :
Method 3: Anchor positioning of a tag (very recommended)
When visiting station b a few days ago, I saw a video explaining the anchor positioning of a tag, and suddenly had a flash of inspiration? Ah, can this be used to switch pages?
I hate it! ! I didn't think of this method when I was writing the project, and purely used the above two methods to achieve it.
Ado
Code:
<!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>Realize the effect:
I feel that this method has no disadvantages, it is simple and fast, and JS has not been used yet.
The above is my summary, welcome everyone to point out. If you don’t understand, you can call the blogger