很多朋友對JS望而生畏，但聽很多朋友說jQuery很簡單，因此開始使用jQuery，使用之后發現，只會寫簡單的功能，復雜的功能還是不太會寫或者總是擔心自己寫的有性能問題,對前端人員來說只能通過不斷學習來解決此問題，但對於后台程序員或者只是簡單使用的人員來說，這個就會很影響開發效率了！
其實jQuery團隊已經為大家解決了這個問題，只是很多同學沒發布而已，jQuery團隊基於jQuery打造了一套功能強大的UI框架——jQuery UI.經過長期的改進完善，jQuery UI已經擁有了很多常用和實用的功能。我們只需要利用好jQuery UI就可以快速得到想要的效果，而無須寫JS也不用擔心性能問題。
對於jQuery UI很多人覺得其很臃腫，並且很丑陋。
我個人看法如下：相對jQuery UI擁有的強大功能和靈活的自定義選項，其並不顯得臃腫，而且算精簡的了，樣式雖然不是很美觀，但可以定義，所以這個問題基本可忽略。如果有同學經常上國外的站點，就會發現約60%以上的網站都會引用jquery uI.
扯了這么多，就是想告訴大家jQuery UI其實很優秀，要善於利用！今天我基於jQuery UI自定義了一個tabs選項卡樣式！效果是仿的，以后多弄一些漂亮的樣式供大家直接使用！
效果圖如下：
示例完整代碼：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta content="utf-8" /> <title>jQuery UI Tabs 選項卡美化</title> <style type="text/css"> body {background-color: #655c89;font-size: 14px;font-family: "Microsoft Yahei","Tahoma","SimSun";} /*tabs*/ #tabs{width:500px;margin:0 auto;} #tabs ul{margin:0;padding:0;display:table;width:100%;} #tabs ul li{float:left;list-style-type:none;margin-right:2px;} #tabs ul li a {display: block;padding: 17px 30px;background: #544f6b;text-decoration: none;color: #8478B3;} #tabs ul li.ui-tabs-active a {background:#fff;color: #655c89;outline:none;} #tabs-1, #tabs-2, #tabs-3 {padding: 40px;overflow: hidden;position: relative;background: #fff;} /*tabs2*/ #tabs2 {width: 500px;margin: 30px auto 0 auto;} #tabs2 ul {margin: 0;padding: 0;display: table;width: 100%;} #tabs2 ul li {float: left;list-style-type: none;margin-right: 2px;} #tabs2 ul li a {display: block;padding: 17px 30px;background: #544f6b;text-decoration: none;color: #8478B3;} #tabs2 ul li.ui-tabs-active a {background: #fff;color: #655c89;outline: none;} #tabs-4, #tabs-5, #tabs-6 {padding: 40px;overflow: hidden;position: relative;background: #fff;} .copyright {width: 500px;margin: 0 auto;padding: 20px 0;text-align: center;color: #8478B3;} .copyright a{color:#8478B3;display:inline-block;padding:0 5px;text-decoration:none;} </style> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function () { $("#tabs").tabs(); $("#tabs2").tabs({ event: "mouseover" }); }); </script> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">寶貝詳情</a></li> <li><a href="#tabs-2">累計評論</a></li> <li><a href="#tabs-3">成交記錄</a></li> </ul> <div id="tabs-1"> <p>翻開一本書，還沒有看兩眼，就站了起來。在外邊走了一圈，又回來坐下看書，沒看幾分鍾，又站了起來。就這樣，循環反復了不知多少次，最后終於毅然決然地將書合上，開始發呆。這個時候腦子里什么都不願意想，就是想保持這個狀態很久，也不知道過了多久，突然心情一下子舒暢了起來，於是才能靜下心來開始看書。</p> </div> <div id="tabs-2"> <p>不知怎么，最近總是看不進去書，一看書，就會感覺心里發癢，總是想干那些自己比較喜歡的浪費時間的事情。很多時候，明明知道要趕緊把手頭的東西做完，可是就是這樣一直拖着，拖到最后，果真如同學所說：本來需要一個禮拜的事情，結果卻是僅用一天完成，甚至更短。這不並不是說自己有多么智商高抑或是高創造性思維，只是緣於惰性使然。</p> </div> <div id="tabs-3"> <p>惰性，首先來源於自己的不喜歡，亦或是不感興趣。生活中，往往有很多名人會讓你去做自己感興趣的事情，自己擅長的事情，他們說這樣你才能有所作為。聽了這么多年，我依然對此深信不疑。可是問題是，更多的身邊人會告訴我：人這一輩子能夠將興趣與工作統一的人少之又少，所以還是做好工作，興趣也就是輔助性的東西，閑暇之余可以玩玩。我不是一個超級現實主義者，但是這些年的感觸和他們一樣：理想很豐滿，現實很骨感。</p> <p>惰性，其次來源於沒有動力源泉。這就相當於一台機器沒有發動機，怎么也轉動不起來。想讓一個小孩親你一下，給他點好吃的零食就可以辦到，可是現在的我早已不是小孩，什么美食都吊不起胃口，仿然也對什么東西都不感冒。誰都知道，看一些無用的書，做一些無用的事，也許用處自然就會來到。可是這話也就只能夠說說，“無利不起早”的時代，能夠做到如此的人能有幾個，要么是閑人，要么是聖人。</p> </div> </div> <div id="tabs2"> <ul> <li><a href="#tabs-4">寶貝詳情</a></li> <li><a href="#tabs-5">累計評論</a></li> <li><a href="#tabs-6">成交記錄</a></li> </ul> <div id="tabs-4"> <p>翻開一本書，還沒有看兩眼，就站了起來。在外邊走了一圈，又回來坐下看書，沒看幾分鍾，又站了起來。就這樣，循環反復了不知多少次，最后終於毅然決然地將書合上，開始發呆。這個時候腦子里什么都不願意想，就是想保持這個狀態很久，也不知道過了多久，突然心情一下子舒暢了起來，於是才能靜下心來開始看書。</p> </div> <div id="tabs-5"> <p>不知怎么，最近總是看不進去書，一看書，就會感覺心里發癢，總是想干那些自己比較喜歡的浪費時間的事情。很多時候，明明知道要趕緊把手頭的東西做完，可是就是這樣一直拖着，拖到最后，果真如同學所說：本來需要一個禮拜的事情，結果卻是僅用一天完成，甚至更短。這不並不是說自己有多么智商高抑或是高創造性思維，只是緣於惰性使然。</p> </div> <div id="tabs-6"> <p>惰性，首先來源於自己的不喜歡，亦或是不感興趣。生活中，往往有很多名人會讓你去做自己感興趣的事情，自己擅長的事情，他們說這樣你才能有所作為。聽了這么多年，我依然對此深信不疑。可是問題是，更多的身邊人會告訴我：人這一輩子能夠將興趣與工作統一的人少之又少，所以還是做好工作，興趣也就是輔助性的東西，閑暇之余可以玩玩。我不是一個超級現實主義者，但是這些年的感觸和他們一樣：理想很豐滿，現實很骨感。</p> <p>惰性，其次來源於沒有動力源泉。這就相當於一台機器沒有發動機，怎么也轉動不起來。想讓一個小孩親你一下，給他點好吃的零食就可以辦到，可是現在的我早已不是小孩，什么美食都吊不起胃口，仿然也對什么東西都不感冒。誰都知道，看一些無用的書，做一些無用的事，也許用處自然就會來到。可是這話也就只能夠說說，“無利不起早”的時代，能夠做到如此的人能有幾個，要么是閑人，要么是聖人。</p> </div> </div> <div class="copyright">本示例由<a href="http://www.58img.com/">WEB前端資源網</a>發布，作者:風塵</div> </body> </html>
如果有問題或建議可直接留言交流！