Home > Developer > JavaScript
Copy codeThe Code is as follows:
<! 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> jQuery custom tab plug-in </title>
<Style>
Body, ul {padding: 0; margin: 0 ;}
Li {list-style: none ;}
# Tabs {zoom: 1 ;}
# Tab: after {content: ""; display: block; clear: both ;}
# Tabs li {float: left; padding: 10px; color: # FF8900; background: # FFF; cursor: pointer ;}
# Tabs. active {background: # FF8900; color: # FFF ;}
# TabContent {background: # FF8900; color: # FFF; padding: 10px; clear: both ;}
# TabContent div {display: none ;}
# TabContent div. active {display: block ;}
</Style>
</Head>
<Body>
<Ul id = "tabs">
<Li data-tab = "users"> Users </li>
<Li data-tab = "groups"> Groups </li>
</Ul>
<Div id = "tabContent">
<Div data-tab = "users"> Users Content </div>
<Div data-tab = "groups"> Groups Content </div>
</Div>
<Script src = "http://code.jquery.com/jquery-1.9.1.min.js"> </script>
<Script>
JQuery. fn. tabs = function (control ){
Var element = $ (this );
Var control = $ (control );
Element. delegate ('lil', 'click', function (){
// Traverse the tab name
Var tabName = $ (this). attr ('data-tab ');
// Trigger a custom event when you click the tab
Element. trigger ('change. tabs ', tabName );
});
// Bind to a Custom Event
Element. bind ('change. tabs ', function (ev, tabName ){
Element. find ('lil'). removeClass ('active ');
Element. find ('> [data-tab =' + tabName + ']'). addClass ('active ');
});
Element. bind ('change. tabs ', function (ev, tabName ){
Control. find ('> [data-tab]'). removeClass ('active ');
Control. find ('> [data-tab =' + tabName + ']'). addClass ('active ');
});
// Activate 1st tabs
Var firstName = element. find ('li: first '). attr ('data-tab ');
Element. trigger ('change. tabs ', firstName );
Return this;
};
JQuery (function ($ ){
$ ('# Tabs'). tabs ('# tabcontent ');
$ ('# Tab'). bind ('change. tabs ', function (ev, tabName ){
Window. loaction. hash = tabName;
});
$ (Window). bind ('hashchange', function (){
Var tabName = window. location. hash. slice (1 );
$ ('# Tabs'). trigger ('change. tabs ', tabName );
});
});
</Script>
</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
