基于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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
9种方法优化jQuery代码详解
Feb 04 jQuery
jQuery实现简单QQ聊天框
Aug 27 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
jQuery实现简单弹幕制作
Dec 10 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获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
namespace.js Javascript的命名空间库
2011/10/11 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
python字符串连接方式汇总
2014/08/21 Python
python之Socket网络编程详解
2016/09/29 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
python实现移位加密和解密
2019/03/22 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
Python随机数函数代码实例解析
2020/02/09 Python
canvas 阴影和图形变换的示例代码
2018/01/02 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
小学敬老月活动方案
2014/02/11 职场文书
党委领导班子整改方案
2014/09/30 职场文书
标准离婚协议书(2014版)
2014/10/05 职场文书
2014年度培训工作总结
2014/11/27 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
三峡人家导游词
2015/01/31 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
基于Redission的分布式锁实战
2022/08/14 Redis