jquery+css實現(xiàn)Tab欄切換的代碼實例
前幾天面試碰到現(xiàn)場給寫一個Tab欄切換的功能,思想基本上懂,但是好久沒寫過,一時要全部實現(xiàn)效果還真有點難。回來后,再把思路理一理,寫一個,基礎(chǔ)還是很重要的。
最終要實現(xiàn)的效果圖如下:
(1)點擊tab欄顯示對應(yīng)的內(nèi)容,并且tab欄樣式變化。實現(xiàn)方式:一般tab欄如果要做成比較好看的樣式,會切兩張圖作為背景,一張用于選中時的背景,一張用于未選中的背景。這里為了簡單,只用css設(shè)置樣式。然后為每個tab綁定click事件,當(dāng)觸發(fā)click事件時,對應(yīng)的內(nèi)容div的display設(shè)置block,否則設(shè)置為none。
(2)當(dāng)鼠標(biāo)懸停在沒有選中的tab欄上時,改變樣式,移開時又恢復(fù)回來的樣式。如果tab欄已選中,則鼠標(biāo)是否懸停不影響樣式。實現(xiàn)方式:為tab欄添加hover事件,當(dāng)鼠標(biāo)進入時,判斷該tab欄是不是被選中(可以為了選中的tab欄設(shè)置一個class,只需要判斷是否含有該class即可),在不選中的情況下再添加hover的樣式。
完整代碼如下(代碼下載地址):
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>tab標(biāo)簽</title> <link href="css/style.css" rel="external nofollow" type="text/css" rel="stylesheet"> </head> <body> <div class="tab-contain"> <!-- tab欄 --> <ul id="tabs"> <li class="current"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab1">One</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab2">Two</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab3">Three</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="tab4">Four</a></li> </ul> <!-- 對應(yīng)顯示內(nèi)容 --> <div id="content"> <div id="tab1" class="item show"> <h2>title 11111</h2> <p>text here!!!text here!!!text here!!!text here!!!text here!!!</p> <p>text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!</p> </div> <div id="tab2" class="item"> <h2>title 2222</h2> <p>text here!!!text here!!!text here!!</p> <p>text here!!!text here!!!text here!!!text here!text here!!!text here!!!text here!!!</p> </div> <div id="tab3" class="item"> <h2>title 33333</h2> <p>text here!!!</p> <p>text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!</p> </div> <div id="tab4" class="item"> <h2>title 44444</h2> <p>text here!!!text here!!!text here!!!text here!!!text here!!!</p> <p>text here!!!text </p> </div> </div> </div> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js.js"></script> </body> </html>
CSS:
.tab-contain{ margin: 50px auto; width: 1000px; padding:100px; background: #7F7D7D; } #tabs { overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: none; } #tabs li { float: left; margin: 0; } li a { position: relative; background: #ddd; padding: 10px 50px; float: left; text-decoration: none; color: #444; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); border-radius: 20px 20px 0 0; box-shadow: 0 2px 2px rgba(0, 0, 0, .4); } .current a{ outline: 0; background: #fff; z-index: 4; } .hoverItem a{ background: #AAC8B9; } #content { background: #fff; padding: 50px; height: 220px; position: relative; border-radius: 0 5px 5px 5px; box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5); } .item{ display: none; } .show{ display: block; }
JS:
$(function(){ $('#tabs a').click(function(e) { e.preventDefault(); $('#tabs li').removeClass("current").removeClass("hoverItem"); $(this).parent().addClass("current"); $("#content div").removeClass("show"); $('#' + $(this).attr('title')).addClass('show'); }); $('#tabs a').hover(function(){ if(!$(this).parent().hasClass("current")){ $(this).parent().addClass("hoverItem"); } },function(){ $(this).parent().removeClass("hoverItem"); }); });
以上所述是小編給大家介紹的jquery css實現(xiàn)Tab欄切換詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
jQuery實現(xiàn)右側(cè)顯示可向左滑動展示的深色QQ客服效果代碼
這篇文章主要介紹了jQuery實現(xiàn)右側(cè)顯示可向左滑動展示的深色QQ客服效果代碼,涉及jQuery控制頁面元素樣式動態(tài)變換的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10jquery簡單實現(xiàn)滾動條下拉DIV固定在頭部不動
滾動條下拉DIV固定在頭部不動效果,想必很多的朋友都有見到過吧,下面為大家詳細介紹下使用jquery是如何實現(xiàn)的,感興趣的朋友可以參考下2013-11-11jQuery動態(tài)添加及刪除表單上傳元素的方法(附demo源碼下載)
這篇文章主要介紹了jQuery動態(tài)添加及刪除表單上傳元素的方法,涉及jQuery的事件動態(tài)綁定及頁面元素動態(tài)操作技巧,并附帶了demo源碼供讀者下載參考,代碼非常簡潔實用,需要的朋友可以參考下2016-01-01jQuery form插件之a(chǎn)jaxForm()和ajaxSubmit()的可選參數(shù)項對象
這篇文章主要介紹了jQuery form插件之a(chǎn)jaxForm()和ajaxSubmit()的可選參數(shù)項對象的相關(guān)資料,需要的朋友可以參考下2016-01-01jQuery fancybox在ie瀏覽器下無法顯示關(guān)閉按鈕的解決辦法
這篇文章主要介紹了 jQuery fancybox在ie瀏覽器下無法顯示關(guān)閉按鈕的解決辦法的相關(guān)資料,需要的朋友可以參考下2016-02-02在jQuery中使用$而避免跟其它庫產(chǎn)生沖突的方法
這篇文章主要介紹了在jQuery中使用$而避免跟其它庫產(chǎn)生沖突的方法,總共羅列了三種,需要的朋友可以參考下2015-08-08