Simple and common jquery tab implementation

The space on the Web page is huge. Although the resolution of the display is getting bigger and bigger, the web page design still focuses on at least 1024x768 pixels. That is to say, each page can only be used with a safe size of 955x600 pixels. Therefore, in order to accommodate more content in a limited space, the sliding door Label Switching (tabs) method is becoming increasingly popular. Sliding Door technology allows you to place several times of content in the same page area. You can decide which part to display based on your selection. Recently, in practical applications, I gradually developed a Simple tabs implementation based on jquery, which is smaller and more common than the jquery UI tabs plug-in.

The earliest sliding door technology generally transmits a parameter to the JS Function Based on The onclick or onmouseover event, and decides which label to Display Based on the transmitted parameter. For example:

FunctionShowtabs (n ){VaRTabsnumber = 3;For(I = 0; I <tabsnumber; I ++ ){If(I = N) {document. getelementbyid ("Tabpanel -"+ I). style. Display ="Block";}Else{Document. getelementbyid ("Tabpanel -"+ I). style. Display ="None";}}}
 

With such a function, you can set onclick = "showtabs (1)" in the tab title button to display the second part of the content, while other parts are hidden.

The biggest disadvantage of this method is:

1. HtmlCodeMix with JS Code;
2. Poor scalability;

Although JavaScript code can be separated from HTML by means of window. onload binding events, functions can be changed to be more complex to achieve universality. But in general, it is still difficult to make a definition reference everywhere.

Later, with the emergence of various JS class libraries, more powerful tabs emerged. The most famous is the tabs plug-in jquery UI. Once the jquery framework and jquery UI plug-in are loaded, it is much easier to implement tabs on the page. The tabs code in our page is written as follows:

 <  Div  Class  = "Tabs"> <  Ul  > <  Li  > <  A  Href  = "# Panel-1"> Tag 1 </  A  > </  Li > <  Li  > <  A  Href  = "# Panel-2"> Tag 2 </  A  > </  Li  > </  Ul  > <  Div  ID  = "Panel-1"> Area 1 </ Div  > <  Div  ID  = "Panel-2"> Region 2 </  Div  > </  Div  > 

Note: The code here is very clean and does not contain any JS Code or definitions unrelated to the document structure. Then, add a JS Code in the head area or anywhere on the page:

 
$ (Function() {$ (". Tabs"). Tabs ();});
 

The tabs function is implemented. After this line of js code is executed, the above HTML code will become:

 <  Div Class  = "Tabs"> <  Ul  Class  = "UI-Tabs-nav"  Jquery1231647486215  = "2"> <  Li  Class  = "UI-Tabs-selected"> <  A  Href  = "# Panel-1"  Jquery1231647486215  = "8"> Tag 1 </  A > </  Li  > <  Li  > <  A  Href  = "# Panel-2"  Jquery1231647486215  = "9"> Tag 2 </  A  > </  Li  > > </  Ul > <  Div  ID  = "Panel-1"  Class  = "UI-Tabs-panel"  Jquery1231647486215  = "4"> Area 1 </  Div  > <  Div  ID  = "Panel-2"  Class  = "UI-Tabs-panel UI-Tabs-hide" Jquery1231647486215  = "5"> Region 2 </  Div  > </  Div  > 

You can achieve the sliding door effect by combining our own CSS or CSS that comes with jquery UI. In addition, due to jquery's strength, we can place multiple sliding doors on the page and set them at one time.

It should be noted that, because only the tabs plug-in jquery UI is enabled, the generated code is still relatively clean, only CSS classes related to UI-Tabs-XXXX are added. If you include other jquery UI plug-ins, a bunch of CSS definitions will be added even if they are not enabled. In addition, jquery UI tabs also provides powerful control functions. You can dynamically add tabs, modify activation events at will, and define switching effects, you can also set the default activation status and disabled status.

However, I encountered some problems in practical applications. Apart from the fact that jquery UI has a large JS script and CSS does not meet actual application requirements, there is also one of the biggest problems, you may have noticed that in the tag definition of the navigation, the region corresponding to each tag is defined by the Link Target. For example, <a href = "# panel-1"> tag 1 </a> corresponds to <Div id = "Panel-1"> area 1 </div>, if your tag does not match the region, binding tabs () does not work.

In addition, this method brings about another problem, that is, when we need to add a link to the tag, there is no way to add it. Even if you set the tag activation event to onmouseover rather than onclick, the link cannot be implemented because the link is used to specify the target. This requirement does not exist in our actual application. For example:

The tabs labels of the two images must be added to the corresponding news category or Forum section link. At this time, the default binding of jquery UI is troublesome.

In fact, when implementing the sliding door, we can use the following HTML structure to meet our needs:

 <  Div  Class  = "Tabs"> <  Ul  > <  Li  > Tag 1 </  Li  > <  Li > Tag 2 </  Li  > </  Ul  > <  Div  > Area 1 </  Div  > <  Div  > Region 2 </  Div  > </  Div > 

With the jquery library, we can use $ (". tabs ") Find the tag to be implemented, and then. find ("Li") to find the element of the event to be added. When binding an event, we can use this element in $ (". tabs li ") the index value in the set determines which tag is activated, and then displays the Panel corresponding to the index value. The code is similar to this:

 <  Script  Type  = "Text/JavaScript"> $ ( Function () {$ ( ". Tabs" ). Find ( "Li" ). Onmouseover ( Function (E ){ If (E.tar get = This ){VaR Tabs = $ ( This ). Parent (). Children ( "Li" ); VaR Panels = $ ( This ). Parent (). Parent (). Children ( "Div" ); VaR Index = $. inarray ( This , Tabs ); If (Panels. eq (INDEX) [0]) {tabs. removeclass ( "UI-Tabs-selected" ). Eq (INDEX). addclass ( "UI-Tabs-selected" ); Panels. addclass ( "UI-Tabs-hide" ). Eq (INDEX). removeclass ( "UI-Tabs-hide" );}}});}); </  Script  > 

This Code uses only two CSS classes for processing, and automatically determines the corresponding status of tabs and panels. If you have four tabs, but only the first three are enabled, you only need to write three panels. If the fourth panel does not exist, the fourth tab does not take effect automatically.

In actual use, there will be a problem. Generally, we will add a link to the text in the tab. When the mouse slides over this tab, if it refers to the text, then, if the object that inspires an event may be element a rather than element Li, the event cannot be correctly fired. The code for improvement is as follows:

 <  Script  Type  = "Text/JavaScript"> $ (Function () {$ ( ". UI-Tabs-nav> LI>" ) Onmouseover ( Function (E ){ If (E.tar get = This ){ VaR Tabs = $ ( This ). Parent (). Parent (). Children ( "Li" ); VaR Panels = $ ( This ). Parent (). Children ( ". UI-Tabs-panel" );VaR Index = $. inarray ( This , Tabs ); If (Panels. eq (INDEX) [0]) {tabs. removeclass ( "UI-Tabs-selected" ). Eq (INDEX). addclass ( "UI-Tabs-selected" ); Panels. addclass ( "UI-Tabs-hide" ). Eq (INDEX). removeclass ( "UI-Tabs-hide" );}}});}); </  Script  > 

The corresponding HTML structure is:

 <  Div  > <  Ul  Class  = "UI-Tabs-nav"> <  Li  Class  = "UI-Tabs-selected"> <  A  Href  = "/BBS"> New Forum posts </  A  > </  Li > <  Li  > <  A  Href  = "/Blog"> Latest blog </  A  > </  Li  > </  Ul  > <  Div  Class  = "UI-Tabs-panel"> <! -- Call the latest forum hereArticle-->  </  Div  > <  Div  Class  = "UI-Tabs-panel UI-Tabs-hide">  <! -- Call the latest blog post here -->  </  Div  > </  Div  > 

At the same time, we have the following CSS class definitions:

. UI-Tabs-nav{/* Navigation container definition */}. UI-Tabs-nav Li{/* Default label style */}. UI-Tabs-nav Li. UI-Tabs-selected{/* Active tag style */}. UI-Tabs-panel{/* Default display area style */}. UI-Tabs-hide{Display:None;}
 

In this way, you can customize sliding doors of different styles based on your needs and CSS. Place the corresponding js code in the page, and the HTML will automatically become a sliding door anywhere on the page as long as you write an HTML section according to the HTML structure. Instead of specifying a specific selector on each page to apply the tabs () method of the sliding door. Add the required link to your sliding door label as needed, or do not link (href = "#" or href = "javascript: void (0 )").

This sliding door code can run normally as long as it has jquery core and does not need to load jquery UI. It is very simple and generic. You can extend the style as needed.

For details about the effect, see http:/www.taihainet.com. On the homepage of taihai network, I applied a total of nine sliding doors with four styles, and the code is just the section above. The four styles are listed as follows:

Sliding Door 1: multiple search forms. Currently, only two are implemented. The last three are automatically disabled because they do not have the corresponding UI-Tabs-panel, but the link can be clicked.

Sliding Door 2: multiple business information areas, the third of which is automatically disabled because there is no corresponding UI-Tabs-panel.

 

Sliding Door 3: Switch the news topic, and link the text in the tab to the corresponding news topic.

Sliding Door 4: Post calls in Forum sections. The text in the tab is linked to the corresponding Forum section.