Detailed explanation of jquery switching tabs method-JS Tutorial-php.cn

Detailed explanation of jquery switching tabs method

php中世界最好的语言

Release： 2018-04-26 16:52:00

Original

2190 people have browsed it

This time I will bring you a detailed explanation of the method of switching tabs in jquery. What are the precautions for switching tabs in jquery? The following is a practical case, let's take a look.

<%@ 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>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!