jquery自动切换tabs选项卡的具体实现_Javascript教程-查字典教程网
jquery自动切换tabs选项卡的具体实现
jquery自动切换tabs选项卡的具体实现
发布时间:2016-12-30 来源:查字典编辑
摘要:本节内容:jquery实现自动切换选项卡。代码:复制代码代码如下:自动切换tabs选项卡-www.jb51.netcode{font-fam...

本节内容:

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.jb51.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>此处放置测试用的显示内容,自动切换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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类