快捷導(dǎo)航

jQuery實(shí)現(xiàn)tab選項(xiàng)卡效果的方法

更新時(shí)間：2015年07月08日 16:05:09 作者：沉淀歲月

這篇文章主要介紹了jQuery實(shí)現(xiàn)tab選項(xiàng)卡效果的方法,實(shí)例分析了jquery實(shí)現(xiàn)tab選項(xiàng)卡切換效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)tab選項(xiàng)卡效果的方法。分享給大家供大家參考。具體如下：

var tabs = {
 init: function(){
  var $tab_contents=$('.tab-contents'), $tab_nav=$('.tab-nav');
  $tab_contents.find('.tab-content:not(:first)').hide();
  $tab_nav.find('li:first').addClass('active');
  $tab_nav.on('click', 'li a', function(e){
   e.preventDefault();
   var $this=$(this),activeTab=this.hash,parent=$this.parents('section'),$contents=$(parent,$tab_contents);
   $(parent,$tab_nav).find('li').removeClass('active');
   $this.parent().addClass('active');
   $contents.find('.tab-content').hide();
   $contents.find(activeTab).fadeIn(250);
  });
 }
}; 
$(document).ready(tabs.init());

html部分如下：

<section>
 <h2>Section Title</h2>
 <ul class="tab-nav">
  <li><a href="#tab1" title="">Tab 1</a></li>
  <li><a href="#tab2" title="">Tab 2</a></li>
 </ul>
 <div class="tab-contents">
  <div id="tab1" class="tab-content"><!-- Tab 1 content here --></div>
  <div id="tab2" class="tab-content"><!-- Tab 2 content here --></div>
 </div>
</section>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

分享一則JavaScript滾動(dòng)條插件源碼
本文給大家分享的是一則javascript滾動(dòng)條插件的源碼，十分的細(xì)致實(shí)用，有需要的小伙伴可以參考下。
2015-03-03
文件編碼導(dǎo)致jquery失效的解決方法
本篇文章是對(duì)文件編碼導(dǎo)致jquery失效的解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
2013-06-06
GridView中獲取被點(diǎn)擊行中的DropDownList和TextBox中的值
本文為大家介紹下如何通過點(diǎn)擊GridView中的a標(biāo)簽獲取被點(diǎn)擊行中的下拉框和文本框中的值，具體實(shí)現(xiàn)嗲嗎如下，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助
2013-07-07
詳解jQuery停止動(dòng)畫——stop()方法的使用
本文主要對(duì)jQuery停止動(dòng)畫——stop()方法的使用進(jìn)行詳細(xì)介紹，對(duì)學(xué)習(xí)jQuery動(dòng)畫有很好的幫助，下面就跟小編一起來看下吧
2016-12-12
jquery實(shí)現(xiàn)下拉框左右選擇功能
本文主要介紹了jquery實(shí)現(xiàn)下拉框左右選擇功能的方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
jQuery實(shí)現(xiàn)的登錄浮動(dòng)框效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的登錄浮動(dòng)框效果代碼,點(diǎn)擊登陸鏈接可彈出懸浮登錄框,涉及jQuery中show與hide方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
使用easyui從servlet傳遞json數(shù)據(jù)到前端頁(yè)面的兩種方法
這篇文章主要介紹了用easyui從servlet傳遞json數(shù)據(jù)到前端頁(yè)面的兩種方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-09-09
ff下JQuery無法監(jiān)聽input的keyup事件的解決方法
這篇文章主要介紹了ff下JQuery無法監(jiān)聽input的keyup事件的解決方法。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
超簡(jiǎn)單的jquery的AJAX用法
超簡(jiǎn)單的jquery的AJAX用法,需要的朋友可以參考下。
2010-05-05
jquery簡(jiǎn)單的彈出層浮動(dòng)層代碼
一個(gè)簡(jiǎn)單的jquery彈出框代碼實(shí)現(xiàn)，點(diǎn)擊鏈接彈出模式對(duì)話框，任意點(diǎn)擊網(wǎng)頁(yè)的其它地方可以關(guān)閉彈出框，可以自定義透明度，簡(jiǎn)單實(shí)用的jquery彈出框效果。
2015-04-04