前幾天面試碰到現場給寫一個Tab欄切換的功能，思想基本上懂，但是好久沒寫過，一時要全部實現效果還真有點難。回來後，再把思路理一理，寫一個，基礎還是很重要的。
最終要實現的效果圖如下：
（1）點擊tab欄顯示對應的內容，並且tab欄樣式變化。實現方式：一般tab欄如果要做成比較好看的樣式，會切兩張圖作為背景，一張用於選中時的背景，一張用於未選中的背景。這裡為了簡單，只用css設定樣式。然後為每個tab綁定click事件，當觸發click事件時，對應的內容div的display設定block，否則設定為none。
（2）當滑鼠移至上方在沒有選中的tab欄上時，改變樣式，移開時又恢複回來的樣式。如果tab欄已選中，則滑鼠是否懸停不影響樣式。實現方式：為tab欄添加hover事件，當滑鼠進入時，判斷該tab欄是不是被選中（可以為了選中的tab欄設定一個class，只需要判斷是否含有該class即可），在不選中的情況下再添加hover的樣式。
完整代碼如下（代碼下載地址）：
HTML：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>tab標籤</title> <link href="css/style.css" type="text/css" rel="stylesheet"></head><body> <div class="tab-contain"> <!-- tab欄 --> <ul id="tabs"> <li class="current"><a href="#" title="tab1">One</a></li> <li><a href="#" title="tab2">Two</a></li> <li><a href="#" title="tab3">Three</a></li> <li><a href="#" title="tab4">Four</a></li> </ul> <!-- 對應顯示內容 --> <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"); }); });Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
