<%@ 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); $('#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> <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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery选项卡切换特效实现步骤
jquery实现有幻灯效果tab滑动切换菜单
以上就是jquery切换tabs方法详解的详细内容。