純CSS的導航欄Tab切換方案
阿新 • • 發佈：2018-10-31
1、使用：target偽類選擇器以及兄弟選擇器的使用~
:target 是 CSS3 新增的一個偽類，可用於選取當前活動的目標元素。當然 URL 末尾帶有錨名稱 #，就可以指向文件內某個具體的元素。這個被連結的元素就是目標元素(target element)。它需要一個 id 去匹配文件中的 target 。
使用:target偽類需要html錨點，以及錨點對應的html結構，例如下面a標籤的錨點會對應到div的id與錨點名相同的結構
<a href="#list1">首頁</a><div id="list1">首頁的內容</div>
當滑鼠點選觸發到對應錨點的時候，頁面的URL會發生改變：由www.xxxxx.com變成www.xxxxx.com#list1;並且會觸發#list1:target{ } 裡面的css樣式，從而達到操作DOM的效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> ul { margin: 0; padding: 0; list-style: none; } .container { width: 80%; margin: 50px auto; } #list1, #list2 { display: none; } #list1:target, #list2:target { display: block; } .nav li { float: left; padding: 50px; } .nav li a { display: inline-block; text-decoration: none; } #list1:target~ .nav li:first-child { background-color: #ff5; } #list2:target~ .nav li:last-child { background-color: aquamarine; } </style> </head> <body> <div class="container"> <div id="list1">首頁的內容</div> <div id="list2">關於我們的內容</div> <ul class="nav"> <li> <a href="#list1">首頁</a> </li> <li> <a href="#list2">關於我們</a> </li> </ul> </div> </body> </html>
方法二： 使用表單input ——————>radio,偽類:checked
這種方法需要用到label標籤的for屬性： for屬性規定跟那個表單元素繫結
同時也要用到兄弟選擇符~來控制選擇節點:checked對應的樣式顯示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .container { width: 500px; margin: 50px auto; position: relative; background-color:bisque; } ul { margin: 0; padding:0; list-style: none; overflow: hidden; } ul li { height: 60px; width: 49%; float:left; border: 1px solid #ddd; text-align: center; line-height: 60px; } input { position: absolute; width: 48%; margin: 0; padding: 0; height: 60px; display: none; } input:nth-of-type(2) { left: 48%; } .content1, .content2 { width:500px; height: 500px; background-color:aqua; display: none; } input:first-child:checked ~ ul li:first-child, input:nth-of-type(2):checked ~ ul li:nth-of-type(2) { background-color: #ff7300; color: #fff; } input:first-child:checked ~ .content .content1 { display: block; } input:nth-of-type(2):checked ~ .content .content2 { display: block; background-color:darkmagenta; } </style> </head> <body> <div class="container"> <input name="nav" type="radio" id="listOne" /> <input name="nav" type="radio" id="listTwo" /> <ul> <li> <label for="listOne">列表一</label> </li> <li> <label for="listTwo">列表二</label> </li> </ul> <div class="content"> <div class="content1"> 這是列表一的內容 </div> <div class="content2">這是列表二的內容</div> </div> </div> </body> </html>
3、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
position:relative;
width:400px;
margin: 50px auto;
}
input{
display:none;
}
.nav{
position:relative;
overflow:hidden;
}
li{
width:200px;
float:left;
text-align:center;
background:#ddd;
}
li label{
display:block;
width:200px;
line-height:36px;
font-size:18px;
cursor:pointer;
}
.content{
position:relative;
overflow:hidden;
width:400px;
height:100px;
border:1px solid #999;
box-sizing:border-box;
padding:10px;
}
.content1,
.content2{
display:none;
width:100%;
height:100%;
}
.nav1:checked ~ .nav li,
.nav2:checked ~ .nav li {
background:#ddd;
color:#000;
}
.nav1:checked ~ .nav li:first-child,
.nav2:checked ~ .nav li:last-child {
background:#ff7300;
color:#fff;
}
/* .nav1:checked ~ .nav li {
background:#ddd;
color:#000;
&:first-child{
background:#ff7300;
color:#fff;
}
}
.nav2:checked ~ .nav li{
background:#ddd;
color:#000;
&:last-child{
background:#ff7300;
color:#fff;
}
}
.nav1:checked ~ .content > div{
display:none;
&:first-child{
display:block;
}
}
.nav2:checked ~ .content > div{
display:none;
&:last-child{
display:block;
}
} */
.nav1:checked ~ .content > div,
.nav2:checked ~ .content > div {
display:none;
}
.nav1:checked ~ .content > div:first-child,
.nav2:checked ~ .content > div:last-child {
display:block;
}
.active {
background:#ff7300;
color:#fff;
}
.default{
display:block;
}
</style>
</head>
<body>
<div class="container">
<input class="nav1" id="li1" type="radio" name="nav">
<input class="nav2" id="li2" type="radio" name="nav">
<ul class='nav'>
<li class='active'><label for="li1">列表1</label></li>
<li><label for="li2">列表2</label></li>
</ul>
<div class="content">
<div class="content1 default">列表1內容:123456</div>
<div class="content2">列表2內容:abcdefgkijkl</div>
</div>
</div>
</body>
</html>