在這里簡單的介紹一下在頁面布局中很重要的選項卡，在頁面中，選項卡也是經常使用到的布局，所以我們需要多加的練習掌握才可以，除了用jQuery熟練實現它的功能，我們更需要知道如何用JavaScript原生實現選項卡的功能。所以我們先看看原生js代碼的選項卡：
<!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>
.box {
width: 200px;
margin: 0 auto;
border: solid 1px black;
}
.title h2 {
float: left;
font-size: 20px;
border: 1px solid black;
background-color: #ccc;
padding: 10px 0;
width: 48px
}
.cont p {
width: 200px;
background: #eee;
margin: 0;
display: none;
}
.cont p:nth-child(1) {
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="title">
<h2>111</h2>
<h2>222</h2>
<h2>333</h2>
<h2>444</h2>
</div>
<div class="cont">
<p>第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容第一個新聞內容</p>
<p>第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容第二個新聞內容</p>
<p>第三個新聞內容第三個新聞內容第三個新聞內容第三個新聞內容第三個新聞內容第三個新聞內容第三個新聞內容第三個新聞內容第三個新聞內容</p>
<p>第四個新聞內容第四個新聞內容第四個新聞內容第四個新聞內容第四個新聞內容第四個新聞內容第四個新聞內容第四個新聞內容第四個新聞內容</p>
</div>
</div>
</body>
<script>
var ah2 = document.querySelectorAll(".title h2")
var ap = document.querySelectorAll(".cont p")
// 遍歷元素
//這里我們要通過foe循環去獲取li中的索引，然后成功的運用到下面的div中。
for (var i = 0; i < ah2.length; i++) {
// 編號
ah2[i].index = i;
// 各種事件
ah2[i].onclick = function () {
for (var j = 0; j < ap.length; j++) {
ap[j].style.display = "none"
}
// 顯示
ap[this.index].style.display = "block";
}
}
</script>
</html>
看一下jq實現的選項卡的代碼：
<!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>
*{
margin: 0;
padding: 0;
user-select: none;
}
.box{
width: 150px;
border: 2px solid #6e6e6e;
margin: 20px auto;
text-align: center;
overflow: hidden;
}
.box ul{
width: 150px;
list-style: none;
border-bottom: 1px solid #6e6e6e;
}
.box li{
float: left;
width: 50px;
line-height: 40px;
cursor: pointer;
}
.sbox div{
height: 150px;
display: none;
}
.sbox .active{
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li style = "background: blue">1</li>
<li style = "background: red">2</li>
<li style = "background: pink">3</li>
</ul>
<div class="sbox">
<div style = "background: blue" class="active">1111</div>
<div style = "background: red">22222</div>
<div style = "background: pink">333333</div>
</div>
</div>
</body>
<script src="https://lib.baomitu.com/jquery/2.2.4/jquery.min.js"></script>
<script>
$(".box").children("ul").children("li").click(function(event){
event.preventDefault()
$(".sbox").children("div").css("display","none")
$(".sbox").find("div").eq($(this).index()).css("display","block")
})
</script>
</html>