jQuery實現(xiàn)選項卡功能（兩種方法）
更新時間：2017年03月08日 08:48:56 作者：xiongpeiji
本文主要介紹了jQuery兩種方法寫選項卡的實例，具有很好的參考價值。下面跟著小編一起來看下吧
效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<title>JQuery 源碼分析</title>
<style>
#div1 div{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;}
.active{background: red;}
*{margin: 0;padding: 0;}
.tab:after{content: '';display: block;clear: both;}
.tab li{width: 150px;height: 30px;line-height: 30px;text-align: center;cursor: pointer;list-style: none;float: left;margin: 0 10px;background: #ABCDEF;border-radius: 5px;}
.tab li.active{background: #000;color:#fff;}
.content:after{content: '';display: block;clear: both;}
.content li{width: 460px;height: 300px;padding:20px;background: #f7f7f7;display: none;}
</style>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="1" />
<input type="button" value="2"/>
<input type="button" value="3"/>
<div style="display: block;">11111111111</div>
<div>22222222222</div>
<div>333333333333</div>
</div>
<ul class="tab">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="content">
<li style="display: block;">111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
</ul>
<script>
$(function(){
//jQuery 方法一
$('#div1').find('input').click(function(){
$('#div1').find('input').attr('class','');
$('#div1').find('div').css('display','none')
$(this).attr('class','active');
$('#div1').find('div').eq($(this).index()).css('display','block');
});
//jQuery 方法二
$('.tab').find('li').click(function(){
var index = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('.content').find('li').eq(index).show().siblings().hide();
})
})
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
jQuery ajax提交Form表單實例(附demo源碼)
這篇文章主要介紹了jQuery ajax提交Form表單的方法,結合實例分析了jQuery ajax操作實現(xiàn)表單提交的相關技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
表單作為 HTML 最重要的一個組成部分，幾乎在每個網(wǎng)頁上都有體現(xiàn)，例如用戶提交信息、用戶反饋信息和用戶查詢信息等，因此它是網(wǎng)站管理者與瀏覽者之間溝通的橋梁。下面通過實例代碼給大家介紹jQuery 實現(xiàn)表單驗證功能2017-07-07
今天要介紹的是實現(xiàn)類跑馬燈效果的的廣告插件。類似偶公司web-dev的同事在網(wǎng)站首頁上做的目錄廣告播放器。其實很簡單，LEVIN實際應用中也用到,所以稍作整理如下.2010-04-04
這篇文章主要為大家詳細介紹了jquery表單驗證插件validation使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
jquery判斷復選框選中狀態(tài)以及區(qū)分attr和prop
這篇文章主要介紹了jquery判斷復選框選中狀態(tài)以及區(qū)分attr和prop，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了jquery制作LED 時鐘特效,效果非常不錯，需要的朋友可以參考下2015-02-02
animate用于創(chuàng)建自定義動畫的函數(shù)，這個函數(shù)的關鍵在于指定動畫形式及結果樣式屬性對象，接下來為大家介紹下它的使用方法，感興趣的朋友可以參考下哈2013-03-03
jquery實現(xiàn)帶復選框的表格行選中刪除時高亮顯示
在實際的應用中可能會出現(xiàn)表格中帶復選框的，刪除時，將復選框所在的行的記錄刪除。在這的地方，可以加個特效，單擊某行的同時將該行的復選框選中，該行的背景色也高亮顯示2013-08-08
這篇文章主要介紹了基于jQuery實現(xiàn)的美觀星級評論打分組件代碼,涉及jQuery回調(diào)函數(shù)及頁面元素屬性動態(tài)操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
jQuery soColorPacker 網(wǎng)頁拾色器
這篇文章主要介紹了jQuery soColorPacker 網(wǎng)頁拾色器 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-06-06