很多朋友对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选项卡样式！效果是仿的，以后多弄一些漂亮的样式供大家直接使用！

效果图如下：

在线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>

如果有问题或建议可直接留言交流！

基于jQuery UI的tabs选项卡美化的更多相关文章

  1. 基于jQuery扁平多颜色选项卡切换代码

    基于jQuery扁平多颜色选项卡切换代码,支持自动轮播切换,鼠标滑过切换的jQuery特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  2. 一款基于jquery ui的动画提交表单

    今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览   源码下载 实现的代码. html代码: & ...

  3. 一款基于jquery ui漂亮的可拖动div实例

    今天要给大家带来一款基于jquery ui漂亮的可拖动div实例.这款实例用了图片当背景,div层采用了幽灵透明效果.div拖动是基于jquery ui的.界面非常漂亮.一起看下效果图: 在线预览   ...

  4. 基于jQuery select下拉框美化插件

    分享一款基于jQuery select下拉框美化插件.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下 ...

  5. 基于jQuery UI的调色板插件推荐colorpicker

    1.下载地址 点击网页最下端Download,即可下载 2.使用方法 本插件是基于jQuery UI,所以应该先行下载jQuery UI,当然jQuery也必不可少 引入和初始化   引入js文件 & ...

  6. 第二百节，jQuery EasyUI，Tabs(选项卡)组件

    jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...

  7. 基于Jquery UI的autocompelet改写，自动补全控件，增加下拉选项，动态设置样式，点击显示所有选项，并兼容ie6+

    Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...

  8. 基于Jquery ui 可复用的酒店 web页面选择入住日期插件

    效果图: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  9. jquery自动切换tabs选项卡

    <%@ page language="java" contentType="text/html; charset=utf-8"    pageEncodi ...

随机推荐

  1. D3.js data() 方法详解

    Binding data(数据绑定) D3各种图表的作用体现在将数据(Data)转换成可视化的过程. 比如将一个月的气温数据,通过树形图来展现,能够直观的看到气温走势,下个月还需不需要穿秋裤 :) 我 ...

  2. python学习第一天 -安装配置及其输入输出

    Python, 是一种面向对象.解释型计算机程序设计语言. python适合领域: 1.Web网络和各种网络服务 2.系统工具和脚本 3.作为“胶水”语言把其他语言开发的模块包装起来方便使用 pyth ...

  3. [Python shelve模块Error]bsddb.db.DBPageNotFoundError: (-30986, 'DB_PAGE_NOTFOUND: Requested page not found')

    在用scrapy抓数据,用shelve保存时出现了这个Error,目标是储存一串unicode字符串组成的列表,exception代码是tempbase['joke']=joke_list,测试只要j ...

  4. 序列！序列！- 零基础入门学习Python016

    序列!序列! 让编程改变世界 Change the world by program 你可能发现了,小甲鱼把列表.元组和字符串放在一块儿来讲解是有道理的,我们发现Ta们之间有很多共同点: 1. 都可以 ...

  5. Common Subsequence--poj1458(最长公共子序列)

    Common Subsequence Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 43211   Accepted: 17 ...

  6. 【好程序员笔记分享】——Cocoapods集成

    -iOS培训,iOS学习-------型技术博客.期待与您交流!------------ Xcode集成POD教程 准备工作: 首先我们要在我们的电脑中安装POD,进入命令行,输入如下指令 sudo  ...

  7. Latch-up 閂鎖效應 & 靜電放電模式

    * * Latch-up 閂鎖效應, 又稱寄生PNPN效應或可控矽整流器 ( SCR, Silicon Controlled Rectifier ) 效應. 在整體矽的CMOS 管下, 不同極性攙雜的 ...

  8. 关于部分应用无法向POJ提交代码的解决方案

    有个一年没做过题了,最近有骚年反映他们的VirtualJudge无法做POJ的题目,一直都是JudgeError状态. 于是登录到那个VJudge试了试,代码的确一直无法提交成功,他们的服务器发回50 ...

  9. 最详细的 HTTPS 科普扫盲帖

    为什么需要https HTTP是明文传输的,也就意味着,介于发送端.接收端中间的任意节点都可以知道你们传输的内容是什么.这些节点可能是路由器.代理等. 举个最常见的例子,用户登陆.用户输入账号,密码, ...

  10. vps安全设置

    适合新手及才接触VPS的朋友们看一下.主要是关于VPS安全方面相关内容的 禁止ROOT登陆 保证安全性. 使用DDoS deflate简单防攻击. iftop Linux流量监控工具: 每日自己主动备 ...