jQuery簡單幾行代碼實現(xiàn)tab切換
更新時間:2015年03月10日 15:05:23 投稿:hebedich
本文給大家介紹的是一款使用jQuery實現(xiàn)的簡易選項卡的代碼,通過控制css熟悉來實現(xiàn)tab切換,思路清晰,這里推薦給大家。
今天突然心血來潮,想到一個很簡單的方法即可達到的tab效果
其實邏輯很簡單,但看到網(wǎng)上基本上沒這樣寫的
不知道實際應(yīng)用中是否會有問題呢,請大俠指教
復(fù)制代碼 代碼如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery簡易選項卡</title>
<style>
*{ margin:0; padding:0;}
body, ul, li {
margin:0;
padding:0;
}
body {
font:12px/1.5 Tahoma;
}
#outer {
width:450px;
margin:10px auto;
}
#tab {
overflow:hidden;
zoom:1;
background:#000;
border:1px solid #000;
}
#tab li {
float:left;
color:#fff;
height:30px;
cursor:pointer;
line-height:30px;
list-style-type:none;
padding:0 20px;
}
#tab li.current {
color:#000;
background:#ccc;
}
#content {
border:1px solid #000;
border-top-width:0;
}
#content ul {
line-height:25px;
display:none;
margin:0 30px;
padding:10px 0;
}
</style>
</head>
<body>
<div id="outer">
<ul id="tab">
<li class="current">第一課</li>
<li>第二課</li>
<li>第三課</li>
</ul>
<div id="content">
<ul style="display:block;">
1111
</ul>
<ul>
2222
</ul>
<ul>
3333
</ul>
</div>
</div>
<script src=">
<script>
$(function(){
window.onload = function()
{
var $li = $('#tab li');
var $ul = $('#content ul');
$li.click(function(){
$li.removeClass();
var $t = $(this).index();
$(this).addClass('current');
$ul.css('display','none');
$ul.eq($t).css('display','block');
})
}
});
</script>
</body>
</html>
圖片演示:
以上就是本文所述的全部內(nèi)容了,希望大家能夠喜歡。
您可能感興趣的文章:
- jQuery實現(xiàn)類似滑動門切換效果的層切換
- jQuery實現(xiàn)的經(jīng)典滑動門效果
- 基于jquery自己寫tab滑動門(通用版)
- jQuery實現(xiàn)自動切換播放的經(jīng)典滑動門效果
- jQuery實現(xiàn)的多滑動門,多選項卡效果代碼
- jquery實現(xiàn)標題字體變換的滑動門菜單效果
- 使用jquery實現(xiàn)div的tab切換實例代碼
- jQuery簡單tab切換效果實現(xiàn)方法
- jquery實現(xiàn)簡單Tab切換菜單效果
- jQuery+css實現(xiàn)的tab切換標簽(兼容各瀏覽器)
- Jquery滑動門/tab切換實現(xiàn)方法完整示例
相關(guān)文章
從零開始學(xué)習(xí)jQuery (六) jquery中的AJAX使用
本篇文章講解如何使用jQuery方便快捷的實現(xiàn)Ajax功能.統(tǒng)一所有開發(fā)人員使用Ajax的方式.2011-02-02jquery mobile changepage的三種傳參方法介紹
本來覺得changePage 那么多option,傳幾個參數(shù)應(yīng)該沒問題結(jié)果翻遍國內(nèi)外網(wǎng)站,基本方法只有三種,下面與大家分享下,感興趣的朋友可以參考下2013-09-09ajax+jQuery實現(xiàn)級聯(lián)顯示地址的方法
這篇文章主要介紹了ajax+jQuery實現(xiàn)級聯(lián)顯示地址的方法,涉及jQuery操作Ajax實現(xiàn)級聯(lián)顯示的技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05jQuery選擇器源碼解讀(七):elementMatcher函數(shù)
這篇文章主要介紹了jQuery選擇器源碼解讀(七):elementMatcher函數(shù),本文講解了源碼、功能、參數(shù)、返回函數(shù) 等內(nèi)容,需要的朋友可以參考下2015-03-03基于jquery的用dl模擬實現(xiàn)可自定義樣式的SELECT下拉列表(已封裝)
通過dl模擬實現(xiàn)SELECT下拉列表. 其實這是項目中要常用到的一個效果, 于是, 在之前寫的基礎(chǔ)上封裝成了一個插件. 可自定義樣式, 可防止用戶本意劃過時觸發(fā)事件.2010-11-11