jquery實(shí)現(xiàn)簡(jiǎn)單Tab切換菜單效果
本文實(shí)例為大家分享了jquery Tab切換菜單的實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)tab切換的主要html代碼:
<div class="container"> <ul class="tabs"> <li class="active"><a href="#tab1">導(dǎo)航菜單</a></li> <li><a href="#tab4">TAB標(biāo)簽</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content" style="display: block; "> <h3><a >jquery css多級(jí)下拉菜單</a></h3> <p id="">多級(jí)菜單,理論上支持無限多的層級(jí),文件結(jié)構(gòu)非常簡(jiǎn)單的,具體的請(qǐng)看下面的內(nèi)容</p> </div> <div id="tab4" class="tab_content" style="display: none; "> <h2>各種tab標(biāo)簽選項(xiàng)卡</h2> <h3><a >tab標(biāo)簽頁面,ajax載入</a></h3> <p> tab標(biāo)簽,jquery ajax載入數(shù)據(jù)庫的內(nèi)容</p> </div> </div> </div>
實(shí)現(xiàn)tab切換的jquery代碼:
<script type="text/javascript"> $(document).ready(function() { //默認(rèn)active $(".tab_content").hide(); //隱藏全部的tab菜單內(nèi)容 $("ul.tabs li:first").addClass("active").show(); //對(duì)第一個(gè)li標(biāo)簽添加class="active屬性" $(".tab_content:first").show(); //顯示第一個(gè)tab內(nèi)容 //點(diǎn)擊事件 $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //移除class="active"屬性 $(this).addClass("active"); //添加class="active"到選擇標(biāo)簽中 $(".tab_content").hide(); //隱藏全部標(biāo)簽內(nèi)容 var activeTab = $(this).find("a").attr("href"); //找到所屬屬性值來識(shí)別活躍選項(xiàng)卡和內(nèi)容 $(activeTab).fadeIn(); //使內(nèi)容消失 return false; }); }); </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 使用jquery實(shí)現(xiàn)div的tab切換實(shí)例代碼
- jQuery版Tab標(biāo)簽切換
- jQuery簡(jiǎn)單tab切換效果實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- jQuery實(shí)現(xiàn)TAB選項(xiàng)卡切換特效簡(jiǎn)單演示
- 基于jquery的tab切換 js原理
- jquery-easyui關(guān)閉tab自動(dòng)切換到前一個(gè)tab
- jquery移動(dòng)端TAB觸屏切換實(shí)現(xiàn)效果
- 基于jquery tab切換(防止頁面刷新)
- jQuery實(shí)現(xiàn)tab欄切換效果
相關(guān)文章
Laravel admin實(shí)現(xiàn)消息提醒、播放音頻功能
這篇文章主要介紹了Laravel admin實(shí)現(xiàn)消息提醒、播放音頻功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07jQuery實(shí)現(xiàn)列表自動(dòng)滾動(dòng)循環(huán)滾動(dòng)展示新聞
jQuery實(shí)現(xiàn)列表自動(dòng)滾動(dòng)循環(huán)滾動(dòng)展示新聞,鼠標(biāo)懸停時(shí)停止?jié)L動(dòng)并提示,離開后,繼續(xù)滾動(dòng),實(shí)現(xiàn)的代碼如下,需要的朋友可以看看2014-08-08基于jQuery中對(duì)數(shù)組進(jìn)行操作的方法
本篇文章小編將為大家介紹,基于jQuery中對(duì)數(shù)組進(jìn)行操作的方法。有需要的朋友可以參考一下2013-04-04使用jquery animate創(chuàng)建平滑滾動(dòng)效果(可以是到頂部、到底部或指定地方)
這篇文章主要介紹了使用jquery animate創(chuàng)建平滑滾動(dòng)效果,效果可以滾動(dòng)到頂部、到底部或頁面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以參考下2014-05-05如何使用jQuery Draggable和Droppable實(shí)現(xiàn)拖拽功能
本篇文章是對(duì)使用jQuery Draggable和Droppable實(shí)現(xiàn)拖拽功能的方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-07-07jQuery+CSS3實(shí)現(xiàn)3D立方體旋轉(zhuǎn)效果
這篇文章主要介紹了jQuery結(jié)合CSS3來制作3D立方體旋轉(zhuǎn)效果,切換圖片時(shí)呈現(xiàn)3D立體圖片畫廊特效,需要的朋友可以參考下2015-11-11jquery ztree實(shí)現(xiàn)模糊搜索功能
這篇文章主要為大家詳細(xì)介紹了jquery ztree實(shí)現(xiàn)模糊搜索功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02