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& ...
随机推荐
- std::move()和std::forward()
std::move(t)负责将t的类型转换为右值引用,这种功能很有用,可以用在swap中,也可以用来解决完美转发. std::move()的源码如下 template<class _Ty> ...
- 【转】开始使用Mac OS X——写给Mac新人
写这篇文档的原因有两个,一.身边使用Mac的朋友越来越多,经常会有人来咨询一些常见的使用问题,比如:“为什么把界面右上角的红色按钮叉掉,程序还没有关闭?”之类.而且我也不愿意看到很多人使用OSX时仅仅 ...
- In Java, what is the default location for newly created files?
If the current directory of the application. If e.g. you create a File by using new FileOutputStream ...
- iOS UILabel：宽度固定，自动高度显示全部文字
desclabel.width = self.view.width - (leftOffset*2); desclabel.lineBreakMode = NSLineBreakByWordWrapp ...
- 在网上浏览.NET的所有代码，并且让你的Visual Studio的go to definition(F12)指向在线代码
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:在网上浏览.NET的所有代码,并且让你的Visual Studio的go to definition(F ...
- MD5是什么，怎么用着怪怪的
写作目的 通常我们在使用加密算法时,都是直接调用一个方法,比如Base64,直接把待加密的字符串给加密好了.对于某些使用公私钥的算法,最多再传入一段公钥即可.但是在使用MD5算法的时候,总是需要用到一 ...
- 加速 Gradle 构建大型 Android 项目的方法[转]
加速 Gradle 构建大型 Android 项目的方法 时间 2016-03-14 20:38:00 Mystra 原文 http://www.wangchenlong.org/2016/03/ ...
- SSO之CAS备忘
http://blog.chinaunix.net/uid-28380443-id-4740103.html 自己负责的公司基于CAS单点登录平台架构已经上线运行,很多细节的东西是时候备忘一下了,开源 ...
- （转）JS正则表达式元字符
正则 描述 正则 描述 \f 匹配换页符 \t 匹配制表符 \n 匹配换行符 \v 匹配垂直制表符 \r 匹配回车 \s 匹配单个空格,等同于[\f\n\r\t\v]; \S 表示非空格字符 \d 在 ...
- (转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是 ...