jquery自動(dòng)切換tabs選項(xiàng)卡的具體實(shí)現(xiàn)
本節(jié)內(nèi)容:
jquery實(shí)現(xiàn)自動(dòng)切換選項(xiàng)卡。
代碼:
<%@ 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>自動(dòng)切換tabs選項(xiàng)卡-www.dbjr.com.cn</title>
<!-- 注意引進(jìn)的文件順序,你做的沒(méi)有效果也許就是因?yàn)槲募M(jìn)順序不對(duì)! -->
<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>此處放置測(cè)試用的顯示內(nèi)容,自動(dòng)切換tabs選項(xiàng)卡,自動(dòng)切換tabs選項(xiàng)卡,自動(dòng)切換tabs選項(xiàng)卡。
自動(dòng)切換tabs選項(xiàng)卡,自動(dòng)切換tabs選項(xiàng)卡,自動(dòng)切換tabs選項(xiàng)卡。自動(dòng)切換tabs選項(xiàng)卡。</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實(shí)現(xiàn)選項(xiàng)卡切換效果簡(jiǎn)單演示
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- jQuery實(shí)現(xiàn)TAB選項(xiàng)卡切換特效簡(jiǎn)單演示
- jQuery簡(jiǎn)單實(shí)現(xiàn)tab選項(xiàng)卡切換效果
- jQuery實(shí)現(xiàn)Tab選項(xiàng)卡切換效果簡(jiǎn)單演示
- 基于jquery實(shí)現(xiàn)最簡(jiǎn)單的選項(xiàng)卡切換效果
- jQuery實(shí)現(xiàn)滾動(dòng)切換的tab選項(xiàng)卡效果代碼
- jquery編寫(xiě)Tab選項(xiàng)卡滾動(dòng)導(dǎo)航切換特效
- jquery實(shí)現(xiàn)選項(xiàng)卡切換代碼實(shí)例
- jQuery實(shí)現(xiàn)選項(xiàng)卡切換圖片
相關(guān)文章
使用jquery的ajax需要注意的地方dataType的設(shè)置
沒(méi)有設(shè)置dataType:'json',就出現(xiàn)無(wú)法解析返回的data數(shù)據(jù),會(huì)把data當(dāng)作字符串處理,而不是json對(duì)象,記得以前是不用設(shè)dataType的,很奇怪,不知道是不是跟jquery版本有關(guān)系2013-08-08jQuery實(shí)現(xiàn)TAB風(fēng)格的全國(guó)省份城市滑動(dòng)切換效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)TAB風(fēng)格的全國(guó)省份城市滑動(dòng)切換效果代碼,涉及jquery鼠標(biāo)mouseover事件及頁(yè)面元素遍歷的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08jQuery點(diǎn)擊tr實(shí)現(xiàn)checkbox選中的方法
jQuery點(diǎn)擊tr實(shí)現(xiàn)checkbox選中的方法,需要的朋友可以參考一下2013-03-03jquery實(shí)現(xiàn)選項(xiàng)卡切換代碼實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)選項(xiàng)卡切換,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05Html5的placeholder屬性(IE兼容)實(shí)現(xiàn)代碼
Placeholder是HTML5新增的另一個(gè)屬性,當(dāng)input或者textarea設(shè)置了該屬性后,該值的內(nèi)容將作為灰字提示顯示在文本框中,當(dāng)文本框獲得焦點(diǎn)時(shí),提示文字消失。以前要實(shí)現(xiàn)這效果都是用JavaScript來(lái)控制才能實(shí)現(xiàn) , firefox、google chrome等表示對(duì)其支持 , 唯獨(dú)IE不支持2014-08-08簡(jiǎn)單實(shí)現(xiàn)限制uploadify上傳個(gè)數(shù)
本文給大家分享的是在使用uploadify上傳文件或者圖片的時(shí)候,如何做到限制上傳個(gè)數(shù)的方法,十分的簡(jiǎn)單方便實(shí)用,有需要的小伙伴可以參考下。2015-11-11jQuery訪問(wèn)瀏覽器本地存儲(chǔ)cookie、localStorage和sessionStorage的基本用法
cookie,localStorage和sessionStorage都是瀏覽器本地存儲(chǔ)數(shù)據(jù)的地方,其用法不盡相同,今天小編通過(guò)本文給大家分享jQuery訪問(wèn)瀏覽器本地存儲(chǔ)cookie、localStorage和sessionStorage的基本用法,需要的朋友參考下吧2017-10-10jquery 實(shí)現(xiàn)輪播圖詳解及實(shí)例代碼
這篇文章主要介紹了jquery 實(shí)現(xiàn)輪播圖相關(guān)資料,經(jīng)過(guò)一段時(shí)間學(xué)習(xí)jquery 的知識(shí),這里寫(xiě)一個(gè)簡(jiǎn)單的輪播圖,需要的朋友可以參考下2016-10-10jquery鼠標(biāo)滑過(guò)提示title具體實(shí)現(xiàn)代碼
這篇文章介紹了jquery鼠標(biāo)滑過(guò)提示title具體實(shí)現(xiàn)代碼,有需要的朋友可以參考一下2013-08-08