这次给大家带来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); $('#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>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是jquery切换tabs方法详解的详细内容。更多信息请关注PHP中文网其他相关文章!