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