Always go to someone else's. Find it difficult to fully meet the needs of the project simply take the time to write one, but it takes longer than I thought, and there's a lot of problems left to be corrected later.
JS Code:
1 varMytabs =function(Container,titlearr, Titlecontainer, Contentcontainer) {2 This. $container =$ (container);3 This. $title =$ (titlecontainer);4 This. $contents =$ (contentcontainer);5 6 This. Init (Titlearr);7 This. Tabchange ();8 }9 TenMytabs.prototype = { One //Initialize AInit:function(arr) { - This. $title. addclass (' Mytab_title '); - This. $contents. addclass (' mytab_content '); the - vari = 0, -Len =arr.length; - + for(; i < Len; i++) { - This. $title. Append (' <li class= ' mytab_title_no "><a href=" #tabs_ ' + i + ' "> ' + arr[i] + ' </a></li> '); + } A at This. Hidealldivs (); - - varFirsttitle = This. $title. Find ("Li:first"); - varFirstdiv = This. $contents. Find (' Div:first '); - -$ (firsttitle). addclass (' mytab_title_active '); in $ (Firstdiv). Show (); - }, to //Toggle +Tabchange:function () { - varTthis = This; theTthis. $title. Find (' Li '). On (' click ',function(e) { * E.preventdefault (); $ Panax Notoginseng varTablink = $ ( This). Find (' a '). attr (' href ')); - the if($ (Tablink). Is (': Hidden '))) { + Tthis.hidealldivs (); A $ (Tablink). Show (); the +$( This). addclass (' mytab_title_active '). Siblings (). Removeclass (' mytab_title_active ')); - } $ }); $ }, - //Hidden -Hidealldivs:function () { the varAlldivs = This. $contents. Find (' div '); -$.each (Alldivs,function(index, ele) {Wuyi $ (ele). Hide (); the }); - } Wu}
CSS code (wanted to try less in order to prevent other projects to use or forget and the style here is not complex):
1 /*title*/2 . Mytab_title{3 Display:Block;4 List-style-type:Disc;5 margin:0;6 padding:0;7}8 9 . Mytab_title Li{Ten float: Left; One List-style:None; A Margin-right:2px; -} - the . Mytab_title Li a{ - Display:Block; - padding:10px 15px; - text-decoration:None; + Color:#808080; -} + A /*Initial Style*/ at . Mytab_title_no{ - Border-top:2px solid #fff; -} - - /*Mouse click*/ - . Mytab_title_active{ in Border-top:2px solid #ca4141; -} to + /*content*/ - . Mytab_content{ the width:100%; * Clear:both; $}
Html:
1 <DivID= "Tabs_container">2 <ulID= "Tabs_title"></ul>3 <DivID= "Tabs_content">4 <DivID= "Tabs_0">5 <P>1</P>6 <P>1</P>7 <P>1</P>8 </Div>9 <DivID= "Tabs_1">Ten <P>2</P> One </Div> A <DivID= "Tabs_2"> - <P>3</P> - </Div> the </Div> - </Div>
Here is a description of the content to be placed in the area Tabs_ must be written otherwise JS get not finished tabs_ inside of the things can be casually written I do not add a scroll bar on the project to choose their own
How to invoke, in addition to the introduction of CSS and JS need to add code is:
var New mytabs ("Tabs_container", ["Program", "Design", "Planning"], "#tabs_title", "#tabs_content");
Parameter description:
1. Entire container
2. All headings
3. Title Container
4. Content Container
[jquery Homemade plugin]tabs anti-forgetting instructions