jquery自動切換tabs選項卡的具體實現(xiàn)
本節(jié)內(nèi)容:
jquery實現(xiàn)自動切換選項卡。
代碼:
<%@ 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>自動切換tabs選項卡-www.dbjr.com.cn</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>此處放置測試用的顯示內(nèi)容,自動切換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>
相關(guān)文章
使用jquery的ajax需要注意的地方dataType的設(shè)置
沒有設(shè)置dataType:'json',就出現(xiàn)無法解析返回的data數(shù)據(jù),會把data當作字符串處理,而不是json對象,記得以前是不用設(shè)dataType的,很奇怪,不知道是不是跟jquery版本有關(guān)系2013-08-08jQuery實現(xiàn)TAB風格的全國省份城市滑動切換效果代碼
這篇文章主要介紹了jQuery實現(xiàn)TAB風格的全國省份城市滑動切換效果代碼,涉及jquery鼠標mouseover事件及頁面元素遍歷的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2015-08-08jQuery點擊tr實現(xiàn)checkbox選中的方法
jQuery點擊tr實現(xiàn)checkbox選中的方法,需要的朋友可以參考一下2013-03-03Html5的placeholder屬性(IE兼容)實現(xiàn)代碼
Placeholder是HTML5新增的另一個屬性,當input或者textarea設(shè)置了該屬性后,該值的內(nèi)容將作為灰字提示顯示在文本框中,當文本框獲得焦點時,提示文字消失。以前要實現(xiàn)這效果都是用JavaScript來控制才能實現(xiàn) , firefox、google chrome等表示對其支持 , 唯獨IE不支持2014-08-08簡單實現(xiàn)限制uploadify上傳個數(shù)
本文給大家分享的是在使用uploadify上傳文件或者圖片的時候,如何做到限制上傳個數(shù)的方法,十分的簡單方便實用,有需要的小伙伴可以參考下。2015-11-11jQuery訪問瀏覽器本地存儲cookie、localStorage和sessionStorage的基本用法
cookie,localStorage和sessionStorage都是瀏覽器本地存儲數(shù)據(jù)的地方,其用法不盡相同,今天小編通過本文給大家分享jQuery訪問瀏覽器本地存儲cookie、localStorage和sessionStorage的基本用法,需要的朋友參考下吧2017-10-10