jQuery+css實(shí)現(xiàn)的tab切換標(biāo)簽(兼容各瀏覽器)
本文實(shí)例講述了jQuery+css實(shí)現(xiàn)的tab切換標(biāo)簽。分享給大家供大家參考,具體如下:
運(yùn)行效果截圖如下:
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>tab切換</title> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript" > (function ($) { function set_active(tab, isActive, mode) { if (!tab) return; if (!isActive) { tab.removeClass('active'); if (mode == "header") { var related_body = $(tab.find('a').attr('tab_body')); set_active(related_body, false, "body"); } } else { tab.addClass('active'); if (mode == "header") { var related_body = $(tab.find('a').attr('tab_body')); set_active(related_body, true, "body"); } } } function change_active(self_$_obj) { var _self_tab_header = self_$_obj.parent(); var prev_active_tab_header = _self_tab_header.parent().find('.active'); set_active(prev_active_tab_header, false, "header"); set_active(_self_tab_header, true, "header"); } function init(self) { if (self.tab_header_length <= 0) { return; } var defaut_active_tab_header = null; for (var i = 0, length = self.tab_header_length; i < length; i++) { var tab_header = $(self.tab_header_array[i]); var tab_header_linker = tab_header.find('a'); tab_header_linker.attr("tab_body", tab_header_linker.attr("href")); tab_header_linker.removeAttr("href"); tab_header_linker.bind("click", function () { change_active($(this)); }); if (tab_header.hasClass('active')) { defaut_active_tab_header = tab_header; } } if (defaut_active_tab_header) { change_active($(defaut_active_tab_header.find('a'))); } else { change_active($(self.tab_header_array[0].find(a))); } } $.fn.c_tab = function () { var _self = $(this); _self.tab_header_group = _self.find('.tab_header_group'); _self.tab_header_array = _self.tab_header_group.find('.tab_header'); _self.tab_header_length = _self.tab_header_array.length; if (_self.tab_header_length == 0) { return; } init(_self); } })($); $(document).ready(function () { $("#tabContainer").c_tab(); }); </script> <style type="text/css" > body { margin:0; padding:0; background:#DFEFFF; } #tabContainer { width:500px; height:300px; margin-left:200px; margin-top:50px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; } .tab_header_group { color:Green; z-index:10; background:#DDDDDD url('img/navbg1.jpg'); width:100%; padding:0; margin:0; border-bottom:1px solid gray; border-radius:4px 4px 0 0;} .tab_header { line-height:30px; font-size:14px; display:inline-block; cursor:pointer; margin-right:-3px; *display:inline; zoom:1; padding-left:10px; padding-right:10px; border-radius:4px 4px 0 0; } .tab_header a,a:hover { text-decoration:none; } .tab_header:hover { background:#F5F5F5; } .tab_header_group .active { margin-bottom:0px; background:gray; color:#fff; } .tab_body { margin-top:1px; display:none; } .tab_body_group .active { display:block; } </style> </head> <body> <div id="tabContainer"> <ul class="tab_header_group"> <li class="tab_header"><a href="#tab1" >首頁(yè)1</a></li> <li class="tab_header"><a href="#tab2" >首頁(yè)2</a></li> <li class="tab_header active"><a href="#tab3" >首頁(yè)3</a></li> <li class="tab_header"><a href="#tab4" >首頁(yè)4</a></li> <li class="tab_header"><a href="#tab5" >首頁(yè)5</a></li> </ul> <div class="tab_body_group"> <div id="tab1" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;"> tab1 </div> <div id="tab2" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;"> tab2 </div> <div id="tab3" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;"> tab3 </div> <div id="tab4" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;"> tab4 </div> <div id="tab5" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;"> tab5 </div> </div> </div> </body> </html>
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jQuery常見(jiàn)經(jīng)典特效匯總》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery實(shí)現(xiàn)類(lèi)似滑動(dòng)門(mén)切換效果的層切換
- jQuery實(shí)現(xiàn)的經(jīng)典滑動(dòng)門(mén)效果
- 基于jquery自己寫(xiě)tab滑動(dòng)門(mén)(通用版)
- jQuery實(shí)現(xiàn)自動(dòng)切換播放的經(jīng)典滑動(dòng)門(mén)效果
- jQuery實(shí)現(xiàn)的多滑動(dòng)門(mén),多選項(xiàng)卡效果代碼
- jquery實(shí)現(xiàn)標(biāo)題字體變換的滑動(dòng)門(mén)菜單效果
- 使用jquery實(shí)現(xiàn)div的tab切換實(shí)例代碼
- jQuery簡(jiǎn)單tab切換效果實(shí)現(xiàn)方法
- jquery實(shí)現(xiàn)簡(jiǎn)單Tab切換菜單效果
- jQuery簡(jiǎn)單幾行代碼實(shí)現(xiàn)tab切換
- Jquery滑動(dòng)門(mén)/tab切換實(shí)現(xiàn)方法完整示例
相關(guān)文章
jQuery ui 利用 datepicker插件實(shí)現(xiàn)開(kāi)始日期(minDate)和結(jié)束日期(maxDate)
這篇文章主要介紹了jQuery ui 利用 datepicker插件實(shí)現(xiàn)開(kāi)始日期(minDate)和結(jié)束日期(maxDate),需要的朋友可以參考下2014-05-05擴(kuò)展jquery實(shí)現(xiàn)客戶端表格的分頁(yè)、排序功能代碼
下面鏈接中是我用jQuery的擴(kuò)展來(lái)實(shí)現(xiàn)的表格分頁(yè)和排序,使用這個(gè)擴(kuò)展必須加上表頭<thead>和<tbody>標(biāo)簽,因?yàn)槲沂?通過(guò)<tbody>來(lái)進(jìn)行分頁(yè)的,要是不加thead,那么表頭也要作為分頁(yè)計(jì)算時(shí)的一個(gè)行了。2011-03-03ASP.NET jQuery 實(shí)例2 (表單中使用回車(chē)在TextBox之間向下移動(dòng))
每次當(dāng)用戶在一個(gè)文本框輸入完數(shù)據(jù)后,更希望在敲入回車(chē)鍵后,焦點(diǎn)會(huì)自動(dòng)移動(dòng)到下一個(gè)文本框2012-01-01jQuery操作iframe中js函數(shù)的方法小結(jié)
這篇文章主要介紹了jQuery操作iframe中js函數(shù)的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery操作iframe中的元素、函數(shù)常用方法與注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07jQuery實(shí)現(xiàn)帶漸顯效果的人物多級(jí)關(guān)系圖代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶漸顯效果的人物多級(jí)關(guān)系圖,可實(shí)現(xiàn)多種關(guān)系的顯示及點(diǎn)擊后漸顯切換效果,涉及jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)修改頁(yè)面元素顯示效果的相關(guān)技巧,需要的朋友可以參考下2015-10-10jquery ajax 檢測(cè)用戶注冊(cè)時(shí)用戶名是否存在
當(dāng)用戶注冊(cè)需要知道這個(gè)用戶名是否被人使用所以需要在用戶登陸前判斷為了使用戶得到更好的體驗(yàn),我們使用了jquery的ajax效果,來(lái)用戶名是否存在。2009-11-11Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法總結(jié)
本文是對(duì)Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11IE8兼容Jquery.validate.js的問(wèn)題
本文主要介紹IE8兼容Jquery.validate.js兼容問(wèn)題并提供哦了解決方法。需要的朋友來(lái)看下吧2016-12-12