Tab Toggle Effect

Today, two small effects are written to test my single parameter function, the result is still a bit successful ~ ~ Here is not want to send emoticons package!

tab effect is very simple, here I will not repeat, directly on the code:

HTML code:

<Divclass= "Content">    <Divclass= "Tab1 CF">        <ul>            <Li>First item</Li>            <Li>Second item</Li>            <Li>Third item</Li>        </ul>    </Div>    <Divclass= "TaB2 CF">        <Div>1111 First Content</Div>        <Div>2222 second Content</Div>        <Div>3333 Third Content</Div>    </Div></Div>

CSS code:

. Tab1 Li {        float: left;         width: 98px;         Border:1px solid #f00;         display: inline-block;         height: 50px;    } . TaB2 Div {        border:1px solid #f00;         width: 300px;         height: 100px;    }

JS Code:

functiontabswitch (tab) {vartabbox=tab; varTab1li=tabbox.find (". Tab1 li"); varTab2div=tabbox.find (". TaB2 Div");        Tab2div.hide (); Tabbox.find (". Tab1 li:first-child"). CSS ("Background", "#FABB3E"); Tabbox.find (". TaB2 div:first-child"). Show (); Tab1li.click (function(){            varindex=$ ( This). index (); $( This). CSS ("Background", "#FABB3E"). Siblings (). CSS ("Background", "#fff");        Tab2div.eq (Index). Show (). siblings (). Hide ();        }); return false; } tabswitch ($ (". Content"));//Call the Tabswitch function

OK, this can be called many times ~

！！

So ugly people do not appreciate, this blog is mainly not prominent style, we can according to their favorite to change the CSS is good!

Tab Toggle Effect