首页  >  文章  >  web前端  >  jquery切换tabs方法详解

jquery切换tabs方法详解

php中世界最好的语言
php中世界最好的语言原创
2018-04-26 16:52:002127浏览

这次给大家带来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中文网其它相关文章!

推荐阅读:

jQuery选项卡切换特效实现步骤

jQuery实现有幻灯效果tab滑动切换菜单

以上是jquery切换tabs方法详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn