溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
html代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>實現簡單的tab框</title> <link rel="stylesheet" href="css/tabDemo.css" rel="external nofollow" > <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/tabDemo.js"></script> </head> <body> <ul class="main"> <li class="style1">休閑裝</li> <li>名媛</li> <li>運動服</li> </ul> <ul class="sublevel"> <li class="style2">女裝 男裝 童裝</li> <li>甜美風 文藝風</li> <li>運動男 運動女</li> </ul> </body> </html>
css代碼
* {
margin: 0;
padding: 0px;
}
ul {
width: 300px;
margin: 10px auto;
}
ul li {
list-style: none;
}
.main li {
text-align: center;
float: left;
padding: 5px;
margin-left: 10px;
width: 80px;
cursor: pointer;
background-color: #f3f2e7;
}
.main .style1 {
width: 50px;
font-weight: bold;
background-color: #f3f2e7;
border: 1px solid #837979;
border-bottom: 0;
z-index: 100;
position: relative;
}
.sublevel {
width: 260px;
height: 80px;
padding: 19px;
background-color: #f3f2e7;
clear: left;
border: 1px solid #837979;
position:relative;
top: -1px;
}
.sublevel li{
display: none;
}
.sublevel .style1{
display: block;
}
jquery代碼
$(function () {
//頁面打開時 呈現的效果
$(".sublevel li:eq(0)").show();
//each遍歷輸出
$(".main li").each(function(index) {
//click 點擊
$(this).click(function() {
//addClass()增加當前樣式 removeClass()移除除當前點擊之外的同級樣式
$(this).addClass("main style1").siblings().removeClass("style1");
$(".sublevel li:eq("+index+")").show().siblings().hide();
})
})
})
以上這篇使用jQuery實現簡單的tab框實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
