jquery自动切换tabs选项卡
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- 注意引进的文件顺序，你做的没有效果也许就是因为文件引进顺序不对！ -->
<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>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. </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>
jquery自动切换tabs选项卡的更多相关文章
- 第二百节，jQuery EasyUI，Tabs(选项卡)组件
jQuery EasyUI,Tabs(选项卡)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 5.选项卡面板 本节课重点了解 EasyUI 中 Tabs(选项卡)组件的使用方 ...
- 基于jQuery UI的tabs选项卡美化
很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...
- jQuery 标签切换----之选项卡的实现
这一次,我自己写了代码,先看html部分: <div class="tab"> <div class="tab_menu"> <u ...
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- tabs自动切换功能的实现
<html><head><!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href= ...
- html+css+jQuery+JavaScript实现tab自动切换功能
tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- jquery背景自动切换特效
查看效果网址:http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: <!DOCTYPE html PUBLIC ...
- jquery叠加页片自动切换特效
查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/34.htm 下面是HTML代码: <!DOCTYPE html> <html xmlns= ...
- HTML+JS+DOM【选项卡自动切换】
最终效果图(鼠标无操作会自动切换选项卡): <!DOCTYPE html> <html> <head> <meta charset="gb2312& ...
随机推荐
- Windows不能在本地计算机启动OracleDBConsoleorcl .错误代码2
Windows 不能在 本地计算机 启动 OracleDBConsoleorcl.有关更多信息,查阅系统事件日志.如果这是非 Microsoft 服务,请与服务厂商联系,并参考特定服务错误代码 2. ...
- 4 weekend110的hdfs&mapreduce测试 + hdfs的实现机制初始 + hdfs的shell操作 + 无密登陆配置
Hdfs是根/目录,windows是每一个盘符, 1 从Linux里传一个到,hdfs里去 2 从hdfs里下一个到,linux里去 想从hdfs里,下载到linux, 涨知识,记住,hdfs是建 ...
- CSDN被黑几年后 我决定继续blogs
CSDN被黑几年后 我决定继续blogs 可惜了我那么多年的文章,全没了 希望这个博客顺风顺水---2015-12-23
- group by子句的三点注意项
1.在含有统计函数的select语句中,如果不使用group by子句,那么select子句中只允许出现统计函数,其他任何字段都不允许出现: 2.在含有统计函数的select语句中,如果使用了grou ...
- Visual Studio 2015安装过程卡住，解决办法
Visual Studio 2015安装过程中卡住的情况有很多,我遇到的是卡在安装windows 更新KB2999226,解决办法 手动安装此更新包,位置在Visual Studio的安装包中,目录: ...
- [置顶] 第二届微软CRM交流年会
第二届微软CRM交流会将在12月14日举行,亲们要是感兴趣可以查看下面的活动详情.Jeff也是第一次参加这类活动,作为本次活动的嘉宾我为大家带来一个挺有意思的分享主题<Dynamics CRM ...
- String与常量池
转自:http://blog.sina.com.cn/s/blog_69dcd5ed0101171h.html 1. 首先String不属于8种基本数据类型,String是一个对象.因为对象的默认值是 ...
- KVM虚拟化技术
KVM虚拟化技术 Qemu-kvm kvm virt-manager VNC Qemu-kvm创建和管理虚拟机 一.KVM简介 KVM(名称来自英语:Kernel-basedVirtual Machi ...
- Redis实战之Redis + Jedis[转]
http://blog.csdn.net/it_man/article/details/9730605 2013-08-03 11:01 1786人阅读 评论(0) 收藏 举报 目录(?)[-] ...
- Android 完美退出 App （Exit）
最近两天为了解决Android上面退出程序问题折腾了半死,在google & baidu 上面找了很久.很久出来的完全千篇一律,说的方法有三,但是经过我试验后全部不行. 三个方法分别是: ki ...