使用jQuery實現(xiàn)簡單的tab框實例
更新時間：2017年08月22日 08:19:00 投稿：jingxian
下面小編就為大家?guī)硪黄褂胘Query實現(xiàn)簡單的tab框實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
html代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>實現(xiàn)簡單的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 () {
//頁面打開時 呈現(xiàn)的效果
$(".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實現(xiàn)簡單的tab框實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
回調函數(shù)指的是被調用者完成處理后自動回調調用者預先傳遞的函數(shù)。2014-05-05
本文通過實例代碼給大家簡單介紹了jQuery圖片縮放插件smartZoom使用以及遇到問題的解決方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-08-08
jquery中的mouseleave和mouseout的區(qū)別 模仿下拉框效果
不論鼠標指針離開被選元素還是任何子元素，都會觸發(fā) mouseout 事件,只有在鼠標指針離開被選元素時，才會觸發(fā) mouseleave 事件2012-02-02
jquery多行滾動/向左或向上滾動/響應鼠標實現(xiàn)思路及代碼
多行滾動jQuery循環(huán)新聞列表代碼包括以下功能:鼠標滑上焦點圖時停止自動播放/滑出時開始自動播放以及判斷執(zhí)行橫向或縱向滾動,感興趣的朋友可以了解下哦2013-01-01
jquery是等待頁面加載完數(shù)據(jù)，以及頁面部分元素；js是頁面全部加載完成才執(zhí)行初始化加載，具體示例祥看本文2014-04-04
jQuery插件實現(xiàn)非常實用的tab欄切換功能【案例】
這篇文章主要介紹了jQuery插件實現(xiàn)非常實用的tab欄切換功能,涉及jQuery事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2019-02-02
jQuery 1.5 beta1出來了，從學習跟進上來說，這一次已經(jīng)比較晚了（我竟然不知道1.5什么時候出的alpha，就這么beta了）。2011-01-01
在逛博客中無意中看到這個插件，一下就吸引住了我，于是就自己在網(wǎng)上找了些資料實踐了一下2011-08-08
在項目制作中，有時候需要向用戶提供一定的幫助信息來提示用戶的操作，當然，suggest功能是必不可少的，但是自己開發(fā)的話，是比較費時費事的，這里就直接拿JQuery的autocomplete來用吧， 實驗證明，效果很好2011-05-05
這篇文章主要介紹了jQuery對于顯示和隱藏等常用狀態(tài)的判斷方法,給出了兩種較為常用的判斷方法,非常具有實用價值,需要的朋友可以參考下2014-12-12