• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery自动切换tabs选项卡的具体实现

jquery自动切换tabs选项卡的具体实现

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jquery选项卡切换,自动切换tabs等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

本节内容:
jquery实现自动切换选项卡。

代码:

<script type="text/javascript" src="<%=path %>/js/jquery-1.2.6.js"></script>
<script src="<%=path%>/js/ui.core.js" type="text/javascript"></script>
<link href="<%=path%>/css/ui.tabs.css" rel="stylesheet" type="text/css" />
<script src="<%=path%>/js/ui.tabs.js" type="text/javascript"></script>

<style type="text/css">
code {
    font-family: "Courier New", Courier, monospace;
}
</style>
<script type="text/javascript">
 $(function() {
  alert(1);
  $('#rotate > ul').tabs({ fx: { opacity: 'toggle' },selected:0}).tabs('rotate', 500000);
 });
</script> 
</head>
<body>
<hr size="10" color="red"/>
<H1>Rotating UI Tabs example</H1>
<div id="rotate">
<ul>
 <li><a href="#div1"><span>新闻</span></a></li>
 <li><a href="#div2"><span>论坛</span></a></li>
  <li><a href="#div3"><span>博客</span></a></li>
</ul>
<div id="div1"><h4>DIV1</h4>此处放置测试用的显示内容,自动切换tabs选项卡,自动切换tabs选项卡,自动切换tabs选项卡。
自动切换tabs选项卡,自动切换tabs选项卡,自动切换tabs选项卡。自动切换tabs选项卡。</div>
<div id="div2"><h4>DIV2</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="div3"><h4>DIV3</h4>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </div>
</div>
</body>
</html>

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery实现仿百度首页选项卡切换效果
  • jQuery实现选项卡切换效果简单演示
  • jquery自动切换tabs选项卡的具体实现

相关文章

  • 2017-08-16jQuery中判断对象是否存在的方法汇总
  • 2017-08-16基于jquery循环map功能的代码
  • 2017-08-16基于Layer+jQuery的自定义弹框
  • 2017-08-16jQuery检测返回值的数据类型
  • 2017-08-16使用CSS和jQuery模拟select并附提交后取得数据的代码
  • 2017-08-16强烈推荐240多个jQuery插件提供下载
  • 2017-08-16jquery easyui combox一些实用的小方法
  • 2017-08-16jQuery在页面加载时动态修改图片尺寸的方法
  • 2017-08-16jquery控制背景音乐开关与自动播放提示音的方法
  • 2017-08-16jquery1.4后 jqDrag 拖动 不可用

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery实现带滚动线条导航效果的方法
    • 在JQuery dialog里的服务器控件 事件失效问题
    • php跨域调用json的例子
    • jQuery的链式调用浅析
    • jQuery弹簧插件编写基础之“又见弹窗”
    • 拉动滚动条加载数据的jquery代码
    • jQuery实现仿腾讯迷你首页选项卡效果代码
    • Jquery 1.9.1源码分析系列(十二)之筛选操作
    • jQuery多选框选择数量限制方法
    • 基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有