基于jquery实现的tab选项卡功能示例【附源码下载】


Posted in jQuery onJune 10, 2019

本文实例讲述了基于jquery实现的tab选项卡功能。分享给大家供大家参考,具体如下:

jquery这款杀手级别的js框架,显然已成了开发界的标准js库,在开发一般web应用的时候,常常用到。今天找到一个实现jquery tab页的插件,效果还不错,比自己用javascript和css去实现一个tab页好多了。用 tab 页美化界面,对于用户体验来说是显而易见,让各种不同类型的数据分布在不同的tab页中。很直观,也避免了很多数据现在在一个界面中,显得很臃肿,看上去就怕。这一款基于jquery 的tab 页插件名字叫:billy.carousel. 先看看效果图

基于jquery实现的tab选项卡功能示例【附源码下载】

看上去效果还不错吧。

下面看jquery tab 的html页面代码吧

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="jQuery实现的tab选项卡式图片切换效果" />
<title>jQuery实现的tab选项卡式图片切换效果</title>
<!-- JS Includes -->
  <script src="images/jquery.js" type="text/javascript"></script>
  <script src="images/billy.carousel.jquery.min.js" type="text/javascript"></script>
  <!-- CSS Includes -->
  <link rel="stylesheet" href="images/demonstration.css" rel="external nofollow" type="text/css" media="screen" />
  <title>tab选项测试</title>  
</head>
<body>
  <script type="text/javascript">
    $(document).ready( function() {    
      $('#tabber').billy({
        slidePause: 5000,
        indicators: $('ul#tabber_tabs'),
        customIndicators: true,
        autoAnimate: false,
        noAnimation: true
      });
    });
  </script>
  <div id="container" >    
    <h3>Jquery Tab 选项卡测试</h3>
    <p>点击tab页切换</p>
    <!-- The Tabs 标题 -->
    <ul id="tabber_tabs">
      <li><a href="#0" rel="external nofollow" >Tab One</a></li>
      <li><a href="#1" rel="external nofollow" >Tab Two</a></li>
      <li><a href="#2" rel="external nofollow" >Tab Three</a></li>
      <li><a href="#3" rel="external nofollow" >Tab Four</a></li>      
    </ul>    
    <!-- Tabbed 内容区 -->
    <div id="tabber_clip">
      <ul id="tabber">
        <li><img src="images/desert.jpg" width="900" height="400" alt="Desert"></li>
        <li>
           <br />
           我想有一座房子,面朝大海,春暖花开....
        </li>
        <li><img src="images/wood.jpg" width="900" height="400" alt="Wood"></li>
        <li><img src="images/pond.jpg" width="900" height="400" alt="Pond"></li>        
      </ul>  
    </div>  
  </div>
</body>
</html>

在<head>中引入相关的jquery文件之后,按照上面的例子,就可以做出tab页面的样式了,非常简单了。如果需要调整样式,可以修改css.

代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
Jquery Fade用法详解
Nov 06 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 #jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 #jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 #jQuery
jQuery操作cookie的示例代码
Jun 05 #jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 #jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 #jQuery
一文快速了解JQuery中的AJAX
May 31 #jQuery
You might like
php中截取中文字符串的代码小结
2011/07/17 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
javascript模块化简单解析
2016/04/07 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
node.JS md5加密中文与php结果不一致的解决方法
2017/05/05 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
Python的时间模块datetime详解
2017/04/17 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
python scipy卷积运算的实现方法
2019/09/16 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
苹果音乐订阅:Apple Music
2018/08/02 全球购物
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
Java面向对象面试题
2016/12/26 面试题
物业电工岗位职责
2013/11/20 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
后进生评语大全
2015/01/04 职场文书
婚宴致辞
2015/07/28 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
讨论nginx location 顺序问题
2022/05/30 Servers