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& ...
随机推荐
- Yii 的AR单行数据自动缓存机制
相关的YII类: CActiveRecord CActiveRecordBehavior cache Active Record Active Record (AR) 是一个流行的 对象-关系映射 ( ...
- 用Y分钟学会X
Learn X in Y minutes是一个有趣的网站,里面列举了对很多编程语言和工具的极简教程,有各种语言版本的.
- jdk的动态代理
至于jdk的动态代理怎么用此处并不多说,现在是更深一步的理解,jdk的Proxy类到底做了什么. Proxy.newProxyInstance可以生成代理类,此方法有三个参数(ClassLoader ...
- JMeter的基本介绍和入门
1. 介绍 JMeter是Apache组织的开放源代码项目,能做功能测试和性能测试.它能够对HTTP和FTP服务器进行压力和性能测试,也可以对任何数据库进行同样的测试(通过JDBC),还能以多种形式展 ...
- 九度OJ 题目1384：二维数组中的查找
/********************************* * 日期:2013-10-11 * 作者:SJF0115 * 题号: 九度OJ 题目1384:二维数组中的查找 * 来源:http ...
- IO负载高的来源定位 IO系列
http://elf8848.iteye.com/category/281637 前言: 在一般运维工作中经常会遇到这么一个场景,服务器的IO负载很高(iostat中的util),但是无法快速的定位到 ...
- Cocos2d-X中字符串的处理
CCString 用惯了NSString,你会严重高估自己处理字符串的能力.使用Cocos2d-X后只能用char*或者string来代替.诸如字符串的拼接,替换,查找都比NSString麻烦不少. ...
- iOS CoreData (1)
下面开始学习一下CoreData. Core Data不是一个关系型数据库,也不是关系型数据库管理系统(RDBMS). Core Data 为数据变更管理.对象存储.对象读取恢复的功能提供了支持. 它 ...
- NodeJs读取源代码使用的字符集
今天用NodeJs写了个简单的客户端/服务器程序,并让客户端向服务器发送汉字.当在Windows上执行客户端时,发现服务器端打印的接收到的数据是乱码.后来发现Windows上的客户端文件的储存编码方案 ...
- iOS中Git的使用
打开终端: 查看Git的版本的终端命令:git —version 输入:ssh 查看是否已经存在ssh. 如果存在,先将已有的ssh备份,或者将新建的ssh生成到另外的目录下 如果不存在,通过默认的参 ...