基于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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery图片查看插件Magnify开发详解
Dec 25 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 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
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
php压缩文件夹最新版
2018/07/18 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
javascript 写的一个简单的timer
2009/07/30 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
js重写方法的简单实现
2016/07/10 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
vue中父子组件传值,解决钩子函数mounted只运行一次的操作
2020/07/27 Javascript
Python中的jquery PyQuery库使用小结
2014/05/13 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python实现的爬取百度贴吧图片功能完整示例
2019/05/10 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
nohup的用法
2012/11/26 面试题
介绍信怎么写
2015/05/05 职场文书
女性健康讲座主持词
2015/07/04 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python
springboot如何初始化执行sql语句
2021/06/22 Java/Android
JavaScript文档对象模型DOM
2021/11/20 Javascript
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL