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選項卡-m.fzitv.net</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實現(xiàn)灰藍風(fēng)格標(biāo)準二級下拉菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)灰藍風(fēng)格標(biāo)準二級下拉菜單效果代碼,涉及jquery鼠標(biāo)mouseover事件控制頁面元素樣式動態(tài)變換的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
近期公司積極組織我們這些開發(fā)人員學(xué)習(xí)進步，督促我們學(xué)習(xí)更多的技術(shù)來提高自己。為此我選擇了jQuery作為我學(xué)習(xí)的方向，同時我也是想將我的學(xué)習(xí)心得分享給大家，以后我會不斷的更新一系列jQuery方面的學(xué)習(xí)紀要，幫助大家學(xué)習(xí)。2010-01-01
jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法實例分析
這篇文章主要介紹了jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法,結(jié)合實例形式分析了jQuery內(nèi)容過濾選擇器與子元素過濾選擇器相關(guān)功能、原理及使用方法,需要的朋友可以參考下2019-02-02
基于jquery ui的alert,confirm方案（支持換膚）
這篇文章主要介紹了基于jquery ui的alert,confirm方案（支持換膚），修改自網(wǎng)友的源碼，有需要的小伙伴參考下。2015-04-04
本文對jQuery的Cookie插件的使用方法和具體實例進行系統(tǒng)介紹,有需要的朋友可以看下2016-11-11
JQuery.dataTables表格插件添加跳轉(zhuǎn)到指定頁
這篇文章主要介紹了JQuery.dataTables表格插件添加跳轉(zhuǎn)到指定頁的解決方案，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2017-06-06
基于 jQuery 實現(xiàn)鍵盤事件監(jiān)聽控件
這篇文章主要介紹了基于 jQuery 的鍵盤事件監(jiān)聽控件,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了jquery實現(xiàn)仿新浪微博評論滾動效果,基于jquery實現(xiàn)頁面圖文定時滾動效果,涉及jquery頁面元素的遍歷與樣式的動態(tài)操作技巧,是一款經(jīng)典的jquery滾動特效,非常具有實用價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jQuery選擇id屬性帶有點符號元素的方法,涉及jQuery選擇器的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
淺析jQuery的鏈式調(diào)用之each函數(shù)
如果對于jquery的$()包裝器函數(shù)還不是很清楚，請先參閱我的上一篇日志：淺析jQuery的鏈式調(diào)用2010-12-12