jQuery簡單幾行代碼實(shí)現(xiàn)tab切換
更新時(shí)間：2015年03月10日 15:05:23 投稿：hebedich
本文給大家介紹的是一款使用jQuery實(shí)現(xiàn)的簡易選項(xiàng)卡的代碼，通過控制css熟悉來實(shí)現(xiàn)tab切換，思路清晰，這里推薦給大家。
今天突然心血來潮，想到一個(gè)很簡單的方法即可達(dá)到的tab效果
其實(shí)邏輯很簡單，但看到網(wǎng)上基本上沒這樣寫的
不知道實(shí)際應(yīng)用中是否會(huì)有問題呢，請(qǐng)大俠指教
復(fù)制代碼 代碼如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery簡易選項(xiàng)卡</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實(shí)現(xiàn)類似滑動(dòng)門切換效果的層切換
- jQuery實(shí)現(xiàn)的經(jīng)典滑動(dòng)門效果
- 基于jquery自己寫tab滑動(dòng)門(通用版)
- jQuery實(shí)現(xiàn)自動(dòng)切換播放的經(jīng)典滑動(dòng)門效果
- jQuery實(shí)現(xiàn)的多滑動(dòng)門，多選項(xiàng)卡效果代碼
- jquery實(shí)現(xiàn)標(biāo)題字體變換的滑動(dòng)門菜單效果
- 使用jquery實(shí)現(xiàn)div的tab切換實(shí)例代碼
- jQuery簡單tab切換效果實(shí)現(xiàn)方法
- jquery實(shí)現(xiàn)簡單Tab切換菜單效果
- jQuery+css實(shí)現(xiàn)的tab切換標(biāo)簽(兼容各瀏覽器)
- Jquery滑動(dòng)門/tab切換實(shí)現(xiàn)方法完整示例
相關(guān)文章
在Jquery中可以通過選中a標(biāo)簽使用trigger方法定義事件即可模擬用戶點(diǎn)擊超鏈接或者按鈕，感興趣的朋友操作下2013-10-10
Bootstrap+Jquery實(shí)現(xiàn)日歷效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap+Jquery實(shí)現(xiàn)日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了jQuery控制cookie過期時(shí)間的方法,涉及jQuery操作cookie的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)左右輪播切換效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
通過jquery的ajax請(qǐng)求本地的json文件方法
今天小編就為大家分享一篇通過jquery的ajax請(qǐng)求本地的json文件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了zTree節(jié)點(diǎn)文字過多的處理方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
jQuery.datatables.js插件用法及api實(shí)例詳解
這篇文章主要介紹了jquery插件之jQuery.datatables.js用法及api實(shí)例詳解,本文給大家介紹的非常詳細(xì)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10
jquery 插件實(shí)現(xiàn)瀑布流圖片展示實(shí)例
本文給大家分享的是使用jQuery的masonry庫和infinitescroll庫實(shí)現(xiàn)的瀑布流美女圖片展示的實(shí)例，效果非常不錯(cuò)，這里推薦給大家，有需要的小火把可以參考下。2015-04-04
jQuery實(shí)現(xiàn)鼠標(biāo)可拖動(dòng)調(diào)整表格列寬度
這篇文章主要介紹了通過jQuery實(shí)現(xiàn)鼠標(biāo)可拖動(dòng)調(diào)整表格列寬度,需要的朋友可以參考下2014-05-05
jquery 實(shí)現(xiàn)二級(jí)/三級(jí)/多級(jí)聯(lián)動(dòng)菜單的思路及代碼
jQuery的AJAX功能和asp.net來實(shí)現(xiàn)省市區(qū)的三級(jí)聯(lián)動(dòng)效果，其他二級(jí)、三級(jí)或多級(jí)聯(lián)動(dòng)也可以按照此方法完成，由此需求的朋友可以參考下哈，希望可以幫助到你2013-04-04