jquery切换tabs方法详解-js教程-PHP中文网

jquery切换tabs方法详解

php中世界最好的语言

发布： 2018-04-26 16:52:00

原创

1947人浏览过

这次给大家带来jquery切换tabs方法详解，jquery切换tabs的注意事项有哪些，下面就是实战案例，一起来看一下。

<%@ 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> </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);
  $(&#39;#rotate > ul&#39;).tabs({ fx: { opacity: &#39;toggle&#39; },selected:0}).tabs(&#39;rotate&#39;, 500000);
 });
</script>  
</head>
<body>
<hr size="10" color="red"/>
<H1>Rotating UI Tabs example</H1>
<p id="rotate">
<ul>
 <li><a href="#p1"><span>新闻</span></a></li>
 <li><a href="#p2"><span>论坛</span></a></li>
  <li><a href="#p3"><span>博客</span></a></li>
</ul>
<p id="p1"><h4>p1</h4>此处放置测试用的显示内容，自动切换tabs选项卡，自动切换tabs选项卡，自动切换tabs选项卡。
自动切换tabs选项卡，自动切换tabs选项卡，自动切换tabs选项卡。自动切换tabs选项卡。</p>
<p id="p2"><h4>p2</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. 
</p>
<p id="p3"><h4>p3</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. </p>
</p>
</body>
</html>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！