小編又上線了，今日跟大家分享一下實作tab選項卡簡單的方式，tab選項卡是我們常常用到的一個功能點，先給大家介紹兩種方式 --------莫急，請耐心看完哦
1、原生js實作tab選項卡切換
2、jquery實作tab選項卡切換第一種方式，show()和hide()
3、jquery實作tab選項卡切換第二種方式，addClass()和removeClass()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.box{
display: flex;
}
.left li{
border: 1px black solid;
width: 200px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 25px;
}
.left .active{
background: orange;
}
.left li:hover{
background: orange;
}
.box .right{
flex:1;
border: 1px black solid;
}
.right>div{
font-size: 30px;
display: none;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<ul class="ul">
<li class="active">女裝</li>
<li>男裝</li>
<li>童裝</li>
<li>化妝品</li>
</ul>
</div>
<div class="right">
<div style="display: block;">女裝區</div>
<div>男裝內容</div>
<div>童裝內容</div>
<div>化妝品內容</div>
</div>
</div>
<script>
var lis=document.getElementsByClassName("ul")[0].children;
var right=document.getElementsByClassName("right")[0].children;
//這里宣告變數切記使用let宣告哦
for(let i=0;i<lis.length;i++){
lis[i].onclick=function(){
for(let j=0;j<lis.length;j++){
lis[j].removeAttribute("class");
right[j].style.display="none";
}
lis[i].setAttribute("class","active");
right[i].style.display="block";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.5.1.js"></script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#ul{
display: flex;
}
#ul>li{
border: 1px black solid;
width: 150px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 25px;
}
#div{
border: 1px black solid;
width: 606px;
height: 200px;
}
#div>div{
display: none;
}
</style>
</head>
<body>
<ul id="ul">
<li class="active">電鍋</li>
<li>空調</li>
<li>冰箱</li>
<li>洗衣機</li>
</ul>
<div id="div">
<div style="display: block;">電鍋各種品牌</div>
<div>空調價格</div>
<div>冰箱評價</div>
<div>洗衣機服務</div>
</div>
<script>
//jquery中簡單實作tab選項卡切換 取共同的下標 行內樣式
$("#ul>li").on("click",function(){
var index=$(this).index();
$(this).addClass("active").siblings().removeClass("active");
$("#div>div").eq(index).show().siblings().hide()
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery-3.5.1.js"></script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#ul{
display: flex;
}
#ul>li{
border: 1px black solid;
width: 150px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 25px;
}
#div{
border: 1px black solid;
width: 606px;
height: 200px;
}
#div>div{
display: none;
}
#div .show{
display: block;
}
</style>
</head>
<body>
<ul id="ul">
<li class="active">電鍋</li>
<li>空調</li>
<li>冰箱</li>
<li>洗衣機</li>
</ul>
<div id="div">
<div class="show">電鍋各種品牌</div>
<div>空調價格</div>
<div>冰箱評價</div>
<div>洗衣機服務</div>
</div>
<script>
//同樣也是取共同的下標 tab選項卡切換 使用添加和洗掉屬性操作addClass() removeClass()
$("#ul>li").click(function(){
var index=$(this).index();
$(this).addClass("actvve").siblings().removeClass("active");
$("#div>div").eq(index).addClass("show").siblings().removeClass("show");
})
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/241028.html
標籤：其他
上一篇：關于字串的那點事兒（一）