Home > Developer > JavaScript
Implementation of jquery automatic switch tabs Tab
This article mainly introduces the specific implementation of jquery automatic switch tabs tab. If you need it, please refer to it.
Content of this section:
Jquery implements automatic switch tabs.
Code:
The Code is as follows:
<% @ 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> automatically switch the tabs tab -www.jbxue.com </title>
<! -- Pay attention to the order of imported files. What you do is ineffective. It may be because the order of File Import is incorrect! -->
<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>
<Div id = "rotate">
<Ul>
<Li> <a href = "# div1"> <span> News </span> </a> </li>
<Li> <a href = "# div2"> <span> Forum </span> </a> </li>
<Li> <a href = "# div3"> <span> blog </span> </a> </li>
</Ul>
<Div id = "div1">
Automatically switch the tabs tab, automatically switch the tabs tab, and automatically switch the tabs tab. Automatically switch the tabs tab. </Div>
<Div id = "div2">
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.
</Div>
<Div id = "div3">
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. </div>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
