<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <style>. Tabulous_active{Border:1px solid Blue; } </style> <Scriptsrc= "Js/jquery.js"></Script> </Head> <Body> <DivID= "Meeting_tabs"> <ul> <binclass= "Tabulous_active"><ahref="#"title="">All</a></Li> <Li><ahref="#"title="">Not started</a></Li> <Li><ahref="#"title="">Has ended</a></Li> <Li><ahref="#"title="">In progress</a></Li> </ul> <DivID= "Tabs_container"> <Divclass= "Pane">1</Div> <Divclass= "Pane">2</Div> <Divclass= "Pane">3</Div> <Divclass= "Pane">4</Div> </Div> </Div> <Script> $('#meeting_tabs >ul Li'). Click (function(){ $( This). addclass ('tabulous_active'). Siblings (). Removeclass ('tabulous_active'); varNum= $( This). index (); if(Num== 0){ $('#tabs_container. Pane'). Show (); }Else{ $('#tabs_container. Pane'). EQ (num). Show (). siblings (). Hide (); } }); </Script> </Body></HTML>
jquery Simple Tab button Toggle