[jquery Homemade plugin]tabs anti-forgetting instructions

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