jquery自动切换tabs选项卡的具体实现

前端技术 2023/09/04 JavaScript

本节内容：
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.phpstudy.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>

本文地址：https://www.stayed.cn/item/9587

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案