I wrote one beforeTabs tab switch EffectBut it was written using native Javascript. Recently I am studying jquery. Today I have taken the time to rewrite this effect with jquery.
As follows:
HtmlCodeAs follows:
<! Doctype html > < Html Lang = "En-us" > < Head > < Meta Charset = "UTF-8" /> < Title > Tab (for jquery) </ Title > < Link REL = "Stylesheet" Type = "Text/CSS" Href = "CSS/base.css" Media = "All" /> < Style Type = "Text/CSS" > . Tabs { Width : 500px ; Margin : 100px auto ; } . Tabs_menu { Font-size : 0 ; } . Tabs_menu { Padding : 5px ; Border : 1px solid blue ; Font-size : 12px ; Margin-left : 10px ; Background : # Ececec ; Float : Left ; } . Tabs_menu. Selected { Background : White ; Border-bottom : 1px solid white ; Position : Relative ; } . Tabs_content { Border : 1px solid blue ; Padding : 10px ; Margin-top : -1px ; } </ Style > </ Head > < Body > < Div Class = "Tabs" > < H2 Class = "Tabs_menu Clearfix" > < A Href = "Javascript :;" Class = "Selected" > News </ A > < A Href = "Javascript :;" > Sports </ A > < A Href = "Javascript :;" > Entertainment </ A > </ H2 > < Div Class = "Tabs_content_wrap" > < Div Class = "Tabs_content" > News news </ Div > < Div Class = "Tabs_content hide" > Sports </ Div > < Div Class = "Tabs_content hide" > Entertainment entertainment </ Div > </ Div > </ Div > </ Body > </ Html > < Script Type = "Text/JavaScript" SRC = "JS/jquery. Min. js" > </ Script > < Script Type = "Text/JavaScript" > VaR $ Menu = $ ( ' . Tabs>. tabs_menu ' ); $ Menu. Click ( Function () {$ ( This ). Addclass ( ' Selected ' ). Siblings (). removeclass ( ' Selected ' ); VaR Index = $ Menu. Index ( This ); $ ( ' . Tabs_content_wrap>. tabs_content ' ). Eq (INDEX). Show (). siblings (). Hide ();}); </ Script >
TIPS: If jquery is used, you need to introduce the jquery library.
PS: The above are some of the effects I have learned through jquery.