基於jQuery UI的tabs選項卡美化

時間 2019-12-09

原文原文鏈接

不少朋友對JS望而生畏，但聽不少朋友說jQuery很簡單，所以開始使用jQuery，使用以後發現，只會寫簡單的功能，複雜的功能仍是不太會寫或者老是擔憂本身寫的有性能問題,對前端人員來講只能經過不斷學習來解決此問題，但對於後臺程序員或者只是簡單使用的人員來講，這個就會很影響開發效率了！css

其實jQuery團隊已經爲你們解決了這個問題，只是不少同窗沒發佈而已，jQuery團隊基於jQuery打造了一套功能強大的UI框架——jQuery UI.通過長期的改進完善，jQuery UI已經擁有了不少經常使用和實用的功能。咱們只須要利用好jQuery UI就能夠快速獲得想要的效果，而無須寫JS也不用擔憂性能問題。html

對於jQuery UI不少人以爲其很臃腫，而且很醜陋。前端

我我的見解以下：相對jQuery UI擁有的強大功能和靈活的自定義選項，其並不顯得臃腫，並且算精簡的了，樣式雖然不是很美觀，但能夠定義，因此這個問題基本可忽略。若是有同窗常常上國外的站點，就會發現約60%以上的網站都會引用jquery uI.jquery

扯了這麼多，就是想告訴你們jQuery UI其實很優秀，要善於利用！今天我基於jQuery UI自定義了一個tabs選項卡樣式！效果是仿的，之後多弄一些漂亮的樣式供你們直接使用！程序員

效果圖以下：框架

在線DEMO性能

示例完整代碼：學習

<!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>

若是有問題或建議可直接留言交流！網站

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。