jquery实现通用的内容渐显Tab选项卡效果


Posted in Javascript onSeptember 07, 2015

本文实例讲述了jquery实现通用的内容渐显Tab选项卡效果。分享给大家供大家参考。具体如下:

这是一款网页常用的TAB选项卡功能,无鼠标操作的时候它可以自动轮换,美化一般,看上去有些粗糙,有兴趣使用的朋友可以进行细致修饰,相信会更漂亮的。

运行效果如下图所示:

jquery实现通用的内容渐显Tab选项卡效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>通用TAB-有自动轮换功能</title>
 <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
 <style type="text/css">
 <!--
 * {
 padding:0;
 margin:0;
 list-style:none;
 }
 .cur {
 color:#000;
 background-color:#FFF;
 }
 .red {
 font-size: 20px;
 font-weight: bolder;
 }
 #lxfTab-click {
 -moz-border-radius:5px;
 background-color:#069;
 width:600px;
 overflow:hidden;
 padding:2px;
 margin-top:20px;
 margin-left:auto;
 margin-right:auto;
 }
 #lxfTab-click .title {
 color:#FFF;
 }
 #lxfTab-click .title li {
 float:left;
 padding:1px;
 cursor:pointer;
 width:40px;
 margin:8px 0 8px 8px;
 border:1px solid #FFF;
 -moz-border-radius:5px;
 text-align:center;
 }
 #lxfTab-click .content {
 width:600px;
 float:left;
 }
 #lxfTab-click .content li {
 word-wrap:break-word;
 background-color:#FFF;
 padding:6px;
 -moz-border-radius:5px;
 width: 572px;
 margin-top: 0px;
 margin-right: 8px;
 margin-bottom: 8px;
 margin-left: 8px;
 }
 -->
 </style>
 <script>
 $(function() {
 $("#lxfTab-click .title li:first").addClass("cur");
 $("#lxfTab-click .content li:not(:first)").hide();
 $("#lxfTab-click .title li").click(function() {
  var index = $("#lxfTab-click .title li").index($(this));
  $("#lxfTab-click .title li").removeClass("cur");
  $(this).addClass("cur");
  $("#lxfTab-click .content li").hide().eq(index).fadeIn("fast");
  $(".now").text(index + 1);
 });
 /* 自动轮换*/
 var i = -1;
 //设置起始位置
 var speed = 3000;
 //设置轮换速度
 var n = $("#lxfTab-click .title li").length - 1;
 function autoroll() {
  if(i >= n) {
  i = -1;
  }
  i++;
  $("#lxfTab-click .title li").removeClass("cur").eq(i).addClass("cur");
  $("#lxfTab-click .content li").hide().eq(i).fadeIn("fast");
  timer = setTimeout(autoroll, speed);
 };
 /* 鼠标悬停即停止自动轮换 */
 function stoproll() {
  $("#lxfTab-click li").hover(function() {
  clearTimeout(timer);
  i = $(this).prevAll().length;
  }, function() {
  timer = setTimeout(autoroll, speed);
  });
 };
 autoroll();
 //执行自动轮换函数
 stoproll();
 //启动悬停功能
 });
 </script>
 </head>
 <body>
 <div id="lxfTab-click">
 <ul class="title">
 <li>
  1
 </li>
 <li>
  2
 </li>
 <li>
  3
 </li>
 <li>
  4
 </li>
 <li>
  5
 </li>
 </ul>
 <div class="LRbutton">
 <ul>
  <li></li><li></li><li></li>
 </ul>
 </div>
 <ul class="content">
 <li>
  1
 </li>
 <li>
  2
 </li>
 <li>
  3
 </li>
 <li>
  4
 </li>
 <li>
  5
 </li>
 </ul>
 </div>
 </body>
</html>

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

Javascript 相关文章推荐
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 #Javascript
JavaScript简单下拉菜单实例代码
Sep 07 #Javascript
jquery的幻灯片图片切换效果代码分享
Sep 07 #Javascript
jQuery实现简单下拉导航效果
Sep 07 #Javascript
JS实现弹性菜单效果代码
Sep 07 #Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 #Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 #Javascript
You might like
用header 发送cookie的php代码
2007/03/16 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
解决python写的windows服务不能启动的问题
2014/04/15 Python
Python使用MD5加密字符串示例
2014/08/22 Python
理解Python中的With语句
2016/03/18 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
python dict.get()和dict['key']的区别详解
2016/06/30 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
djano一对一、多对多、分页实例代码
2019/08/16 Python
pyqt5、qtdesigner安装和环境设置教程
2019/09/25 Python
django框架两个使用模板实例
2019/12/11 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
strlen的几种不同实现方法
2013/05/31 面试题
学习“七一”讲话精神体会
2014/07/08 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技