Jquery tab plug-in

This article provides two jquery tab switch tabs implemented by using the jquery tab plug-in. With jquery, it is much easier to switch menus.

This article provides two jquery tab switch tabs implemented by using the jquery tab plug-in. With jquery, it is much easier to switch menus. /* Simple tab plug-in */

; (Function ($ ){
$. Fn. tabsimple = function (c ){
C = $. extend ({
Tab: ". s-tab", // Title item
Con: ". s-con", // content item
Curr: "curr", // name of the currently highlighted css tutorial class
Event: "click" // triggered event. All events supported by jquery
}, C );
Return this. each (function (){
Var tab = $ (this). find (c. tab );
Var con = $ (this). find (c. con );
Tab. bind (c. event, function (){
Var I = tab. index ($ (this ));
Tab. removeclass (c. curr); // or tab. find ("." + c. curr). removeclass (c. curr)
$ (This). addclass (c. curr );
Con. hide (). eq (I). show ();
});
});
};
}) (Jquery );

File Code 2

<Div id = "tt" class = "tabs-container" style = "width: 500px; height: 150px;">
<Div title = "tab1" style = "padding: 20px; display: none;"> this is tab1. </div>
<Div title = "tab2" closable = "true" style = "padding: 20px; display: none;"> this is tab2 width close button. </div>
<Div title = "tab3" icon = "icon-reload" closable = "true" style = "padding: 20px; display: none;"> this is tab3 width icon. </div>
<Div title = "tab4 with iframe" closable = "true" style = "width: 100%; height: 100%; display: none;">
<Iframe scrolling = "yes" frameborder = "0" src = http://www.bKjia. c0m style = "width: 100%; height: 100%;"> </iframe>
</Div>
<Div title = "tab5 with sub tabs" closable = "true" icon = "icon-cut" style = "padding: 10px; display: none;">
<Div class = "tabs-container" style = "height1: 100px; width: 100%;">
<Div title = "Sub-title 1"> sub-content 1 </div>
<Div title = "Sub-title 2"> sub-content 2 </div>
<Div title = "subtitle 3"> subtitle 3 </div>
</Div>
</Div>
</Div>