基于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>

若是有问题或建议可直接留言交流！网站