Home > Developer > JavaScript
The idea is the same as that of a regular tab. click the Options menu to highlight and display the corresponding options. in this example, the option area is displayed or hidden by judging the index position of the clicked menu in the menu list. native js also has many implementation methods (search in blue ideal). In order to be consistent with the idea of jQ, this example uses loop judgment. for more information, see notes.
Other notes:
1. the DEMO in this article shows the window. onload = function () {…} of native JS (){...} With $ (document). ready (function () {…}) of jQuery (){...}); The difference, which is why I do not need to define the style to hide the second three display zones in the initial state;
2. This Article is just a prototype implementation of tabs. To use multiple tabs on the same page, variables have been concentrated in the function header and can be encapsulated into functions by yourself;
3. Please do not ask how to achieve cool and cool effects. Please think about adding effects on your own;
4. If you do not want to use this effect, simply copy and paste it mechanically, consider and add it to practice, and then digest it into your own.
View Demo:
<! Doctype html> <ptml> <pead> <meta charset = "gb2312"> <meta name = "author" content = "Mr. think qingbird "/> <meta name =" keywords "content =" Mr. think, front-end development, WEB front-end, front-end technology, front-end development, WEB front-end development, user experience, Website planning, website optimization, qingbird, javascript, jQuery, css, xhtml, html, UE, SEO, Mr. think blog, qingbird blog, PHP enthusiast, Bluebirdsky "/> <meta name =" description "content =" Mr. think's blog, named qingbird, is now focused on WEB Front-end development and is also a PHP enthusiast. love thinking, a little code cleanliness, raw crab legs, love meat. here is where I record knowledge and things in my life. "/> <link rel =" pi Ngback "href =" http://mrthink.net/xmlrpc.php "/> <link rel =" alternate "type =" application/rss + xml "title =" Mr. think blog RSS Feed "href =" http://mrthink.net/feed/ "/> <title> structure/presentation/behavior completely separated tabs (jQ and native JS) @ Mr. think </title> <style>/* reset css */body {font-size: 0.8em; letter-spacing: 1px; font-family: "Microsoft YaHei "; line-height: 1.8em} div, h2, p, ul, li {margin: 0; padding: 0} h1 {font-size: 1em; font-weight: normal;} h 1 a {background: #047; padding: 2px 3px; color: # fff; text-decoration: none;} h1 a: hover {background: # a40000; color: # fff; text-decoration: underline} h3 {color: #888; font-weight: bold; font-size: 1em; margin: 1em auto; position: relative}/* demo css */h2 {width: 120px; height: 25px; background: # a40000; font-size: 12px; color: # fff; text-align: center; line-height: 25px; margin: 30px 0 10px}/* jQ version */ul. tabnav {width: 500px; Height: 25px; margin-left: 100px} ul. tabnav li {background: # baf; color: # fff; line-height: 25px; display: block; float: left; margin: 0 10px; padding: 0 5px; cursor: pointer} ul. tabnav li. hover {background: #047 }. tabbox {width: 500px; height: 100%; border: 2px solid #047 }. tabbox div {margin: 10px; line-height: 20px}/* native js version (the style is the same as jQ version, but the name is different) */ul # tabnav {width: 500px; height: 25px; margin-left: 100px} ul # tabnav li {background: # ba F; color: # fff; line-height: 25px; display: block; float: left; margin: 0 10px; padding: 0 5px; cursor: pointer} ul # tabnav li. hover {background: #047} # tabbox {width: 500px; height: 100%; border: 2px solid #047} # tabbox div {margin: 10px; line-height: 20px} </style> </pead> <body> Mr. think's personal blog @ focus on front-end technology, love PHP, advocate simple life. return to the Article Page: tabs with completely separated structure/performance/behavior (jQ and native JS) @ Mr. think is based on jQ <ul class = "tabnav"> <li> jQuery technology </li> <li> CSS technology </li> <li> xh Tml technology </li> </ul> jQuery technology is displayed here! @ Mr. Think. CSS technology is displayed here! @ Mr. Think. xhtml technology is displayed here! @ Mr. think. native JS version <ul id = "tabnav"> <li> jQuery technology </li> <li> CSS technology </li> <li> xhtml technology </li> </ ul> jQuery technology is displayed here! @ Mr. Think. CSS technology is displayed here! @ Mr. Think. xhtml technology is displayed here! @ Mr. Think. </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Core code:
Copy codeThe Code is as follows:
// JQ version
$ (Function (){
Var _ tab = $ ('ul. tabnav> li'); // obtain the tab navigation
Var _ box = $ ('. tabbox div'); // gets the content in the switch Area
Var _ hover = 'hover '; // The style displayed on the current click
Var _ index; // index value
_ Tab. eq (0). addClass (_ hover); // highlight the first navigation bar
_ Tab. click (function (){
_ Index = _ tab. index (this); // obtain the index value of the current click
$ (This). addClass (_ hover). siblings (). removeClass (_ hover); // highlight the current click
_ Box. eq (_ index). show (). siblings (). hide (); // display the corresponding option content area through the index value
}). Eq (0). click ();
});
// Native JS version
Copy codeThe Code is as follows:
Window. onload = function (){
Var tabnav = document. getElementById ('tabnav ');
Var list = tabnav. getElementsByTagName ('lil ');
Var tabbox = document. getElementById ('tabbox ');
Var divs = tabbox. getElementsByTagName ('div ');
Var hover = 'hover '; // The style displayed on the current click
Var indexValue = function (self, obj) {// The function used to obtain the index value. It is used to obtain the index position of the currently clicked index in the navigation bar.
For (var I = 0; I <obj. length; I ++ ){
If (obj [I] = self) return I;
}
};
Var index;
List [0]. className = hover; // the first one is highlighted by default. We recommend that you directly define it on the page.
For (var k = 1; k <divs. length; k ++) {// for ease of use, the first switch block is displayed by default in a for loop definition. Others are hidden. it is best to define this with CSS to avoid displaying all the pages during loading.
Divs [k]. style. display = 'none ';
}
For (var l = 0; l <list. length; l ++) {// click an event
List [l]. onclick = function (){
Index = indexValue (this, list); // use the previously defined indexValue function to retrieve the index value of the current click in the option navigation bar,
For (var m = 0; m <list. length; m ++ ){
List [m]. className = (m = index )? Hover: ''; // click to highlight the item and remove other item highlights.
}
For (var n = 0; n <divs. length; n ++ ){
Divs [n]. style. display = (n = index )? 'Block': 'none'; // click the corresponding option area to hide other
}
}
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
