JS实现选项卡和JQ实现选项卡
在这里简单的介绍一下在页面布局中很重要的选项卡，在页面中，选项卡也是经常使用到的布局，所以我们需要多加的练习掌握才可以，除了用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>
浙公网安备 33010602011771号