Home > Developer > JavaScript
First, give an official example. You can get the result first.
Html
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<! --
This is a jQuery Tools standalone demo. Feel free to copy/paste.
Http://flowplayer.org/tools/demos/
-->
<Head>
<Title> jQuery Tools standalone demo </title>
<! -- Include the Tools -->
<Script src = "http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"> </script>
<! -- Standalone page styling (can be removed) -->
<Link rel = "shortcut icon" href = "/media/img/favicon. ico">
<Link rel = "stylesheet" type = "text/css"
Href = "./tabs-no-images.css"/>
</Head>
<Body> <! -- Tabs -->
<Ul id = "tabui" class = "cs-tabs">
<Li> <a id = "t1" href = "# tab1"> Tab 1 </a> </li>
<Li> <a id = "t2" href = "# tab2"> Second tab </a> </li>
<Li> <a id = "t3" href = "# tab3"> A ultra long third tab </a> </li>
</Ul>
<! -- Panes -->
<Div id = "tabpans" class = "cs-panes">
<Div>
<P>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
Viverra, leo sit amet auctor fermentum, risus lorem posuere
Tortor, in accumsan purus magna imperdiet sem.
</P>
<P>
Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas
Facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus
Nibh metus, faucibus quis, semper ut, dignissim id, diam.
</P>
</Div>
<Div>
<P>
Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui,
Molestie sed, tristique sit amet, blandit eu, turpis. Mauris
Hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed
Molestie dui quam vitae dui.
</P>
<P>
Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget
Tortor. Maecenas id augue. Vivamus interdum nulla ac
Dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus
Eget dui volutpat molestie.
</P>
</Div>
<Div>
<P>
Maecenas at odio. Nunc laoreet lectus vel ante. Nullam
Imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus,
Nisl. Cum sociis natoque penatibus et magnis dis parturient
Montes, nascetur ridiculus mus.
</P>
<P>
In sed dolor. Etiam eget quam ac nibh pharetra
Adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu
Mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis
Nisi. Vivamus at enim. Integer semper imperdiet
Massa. Vestibulum nulla massa, presponquis, porta id,
Vestibulum vitae, velit.
</P>
</Div>
</Div>
<! -- Activate tabs with JavaScript -->
<Script>
$ (Function (){
//: First selector is optional if you have only one tabs on the page
$ (". Cs-tabs: first"). tabs (". cs-panes: first> div ");
});
</Script>
</Body>
</Html>
Css
Copy codeThe Code is as follows:
/* Root element for tabs */
Ul. cs-tabs {
Margin: 0! Important;
Padding: 0;
Height: 30px;
Border-bottom: 1px solid #666;
}
/* Single tab */
Ul. cs-tabs li {
Float: left;
Padding: 0;
Margin: 0;
List-style-type: none;
}
/* Link inside the tab. uses a background image */
Ul. cs-tabs {
Float: left;
Font-size: 13px;
Display: block;
Padding: 5px 30px;
Text-decoration: none;
Border: 1px solid #666;
Border-bottom: 0px;
Height: 18px;
Background-color: # efefef;
Color: #777;
Margin-right: 2px;
Position: relative;
Top: 1px;
Outline: 0;
-Moz-border-radius: 4px 4px 0 0;
}
Ul. cs-tabs a: hover {
Background-color: # F7F7F7;
Color: #333;
}
/* Selected tab */
Ul. cs-tabs a. on {
Background-color: # ddd;
Border-bottom: 1px solid # ddd;
Color: #000;
Cursor: default;
}
/* Tab pane */
. Cs-panes div {
Display: none;
Border: 1px solid #666;
Border-width: 0 1px 1px 1px;
Min-height: 150px;
Padding: 15px 20px;
Background-color: # ddd;
}
This function is implemented through the jqueryObject. tabs () method.
$ (". Cs-tabs: first"). tabs (". cs-panes: first> div ");
The official class is used. I added the id to div.
$ ("# Tabui"). tabs ("# tabpans> div ");
$ ("# Tabui "). tabs ("# tabpans> div", {event: 'click', tab: 'P', effect: 'default', current: 'on '});
The two functions are the same as those of $ (". cs-tabs: first"). tabs (". cs-panes: first> div ");
Is it very powerful.
The preceding configuration parameters are described as follows:
| Attribute name | Default Value | Description |
|---|---|---|
| Current | 'Current' | The active Tab Of the CSS class name. |
| Effect | 'Default' | The effect is used when you click a tab. This can dramatically change the tabs for such behavior. This is an available built-in effect:
You can alsoMake your own Effect. |
| Event | 'Click' | This option is enabled when an event tab is specified. By default, this occurs when the user clicks the tab. Another valid value is"Mouseover"And'Dblclick'. |
| FadeInSpeed | 200 | Since 1.0.1.When used together with"Fade"Effect. This property defines the display of content in the Panel opened in milliseconds. |
| FadeOutSpeed | 0 |
Since version 1.1.0.When used together with"Fade"Effect. This attribute defines how fast (millisecond) the content of this attribute is hidden in the open pane. A positive value here will lead to a demonstration of the role of "crossfade ".Here. |
| History | False | Since 1.2.0. The browser supports the "back" button, so that when the user clicks the back or forward button to open the corresponding tab. This is requiredHistorical toolsIs included on your page. |
| InitialIndex | 0 |
Specifies the option, which is initially opened when the page is loaded. This will automatically triggerClickThe event is specified on this property for the tab. SpecifyNullOr a negative number is not triggered here.ClickEvent loading causes all tabs to be closed at first. |
| Rotate | False | Since version 1.1.0.When the last tab is open and thisNext ()Call the API call, and then the tab will start from scratch, when the first tab is open and thisPrevious Page ()The call tab comes with the last tab. This is proof inHere. |
| Tabs | 'A' | A selector performs an element and serves as a label on the root element. If no direct child root element is found, it is used as a tab. |
| Event | Trigger time |
|---|---|
| OnBeforeClick | Click a tag. The second parameter is the Index tab. |
| OnClick | Click the next tab. The second parameter is the index click option. |
| Method | Return Value | Description/Example |
|---|---|---|
| Click (index) | API |
The parameters specified in the activation tab. The parameter can be eitherIntegerNumber indicates the tag index (starting from 0), or when the tab isOneMark, it canHrefProperty as referenceString. |
| Destroy () | API |
Since 1.2.3Delete existing tag instances. |
| GetConf () | Object | Since 1.0.1.Returns the instance of the configured OBJECT tag. This object can be modified, and the changes are dynamically reflected in the behavior labels. |
| GetCurrentPane () | jQuery |
Returns the current Panel as a jQuery object. |
| GetCurrentTab () | jQuery |
Returns the current tag as a jQuery object. |
| GetIndex () | Integer | Returns the index of the current tab. |
| GetPanes () | jQuery |
Returns the jQuery object pane. |
| GetTabs () | jQuery |
The return tag is used as a jQuery object. |
| Next () | API |
Go to the next tab. |
| Prev () | API |
Go to the previous tab. |
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
