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