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& ...
随机推荐
- PHP配置图文教程
组合解释:lamp,其英文译为灯,可以方便记忆.其实每个字母代表的是一个英文缩写.l-->Linux,a-->Apache,m-->MySql,p-->PHP 由于以上资源都是 ...
- nodejs 基本问题答疑
传统服务器架构1.服务器接到请求2.创建一个新的响应程序的实例 node服务器架构1.服务器接到请求2.检查处理程序是否存在,如果存在直接处理,不存在则创建. node的做法节省了内存 ubuntu下 ...
- 【转】腾讯OCR—自动识别技术，探寻文字真实的容颜
文字,一种信息记录的图像符号,千年来承载了太多的人类文明印记.OCR,一种自动解读这种图像符号的技术,一直以来都备受关注.尤其在信息时代的今天,数字图像纷繁复杂,如何便捷高效的获取其中的文字信息,更有 ...
- mysql 配置参数
mysql JDBC Driver 常用的有两个,一个是gjt(Giant Java Tree)组织提供的mysql驱动,其JDBC Driver名称(JAVA类名)为:org.gjt.mm.mysq ...
- 子窗体与父窗体传值操作的js示例
//返回值给父窗体 function returnParent(value) {//获取子窗体返回值 var parent = window.dialogArguments; //获取父页面 ...
- [rxjs] Shares a single subscription -- publish()
If have an observable and you subscribe it twice, those tow subscritions have no connection. console ...
- Linux下Ｗireshark普通用户不能获取网络接口问题
Linux下Wireshark普通用户不能获取网络接口问题 1.安装setcap, setcap 是libcap2-bin包的一部分,一般来说,这个包默认会已经装好. sudo apt-get ins ...
- android之listView定位到指定行同时隐藏输入键盘
帮别人该bug遇到的一个问题,记录下来. listView.setSelection(a); 这个方法可以让让你的listview定位到指定行 但是如果紧接着执行隐藏输入键盘的代码,则会有bug,这个 ...
- Java基础知识强化之集合框架笔记53：Map集合之Map集合的遍历 键值对对象找键和值
1. Map集合的遍历(键值对对象找键和值) Map -- 夫妻对 思路: A: 获取所有结婚证的集合 B: 遍历结婚证的集合,得到每一个结婚证 C: 根据结婚证获取丈夫和妻子 转换: A: ...
- iOS UIKit：Navigation Controllers
navigation controller是一种层次结构的container view controller,即其通过一个view controllers栈来管理内部的content view con ...