About ideas, as with the General tab mentality. Click on the Options menu, highlight, and display the corresponding options. This article is mainly to show or hide the option area by judging the click of the menu in the index of the menu list. Native JS also has a number of implementations (blue ideal search), in order to keep in line with the JQ version of Ideas, The examples in this article are circular judgments. See comments for details.
There are several other explanations:
1. Through this demo demo, you can obviously see the native JS window.onload=function () {...} With jquery $ (document). Ready (function () {...}); The difference, which is why I don't use the style definition to hide the 23rd display area in the initial state;
2. This article is just a prototype implementation of the tab, to be used for multiple tabs on the same page, the variable has been concentrated into the function head, can be encapsulated into a function;
3. Please do not ask how to achieve a more cool and dazzling effect, please consider adding effect;
4. Do not want everyone to use this effect only mechanical copy and paste, thinking plus practice, and then digest into their own.
View Demo:
<! DOCTYPE html> <ptml> <pead> <meta charset= "gb2312" > <meta name= "author" content= "Mr.think Bluebird" > <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, Bluebird, Javascript,jquery, Css,xhtml,html,ue,seo,mr.think blog, Bluebird blog, PHP enthusiasts, Bluebirdsky "/> <meta name=" description "content=" Mr.think Blog , the Chinese Network name Bluebird, is now focused on the Web front-end development, but also a fan of PHP. Love to think, a little code neat, eat raw crab legs, like meat. Here is where I keep track of the trivia of knowledge and life. "/> <link rel=" Pingback "href=" http://mrthink.net/xmlrpc.php "/> <link rel=" alternate "type=" Application/rss+xml "title=" mr.think "Blog RSS Feeds" href= "http://mrthink.net/feed/"/> <title> structure/performance/Behavior Complete Separation tab (JQ and Native JS edition) @Mr .think</title> <script Src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" ></script> <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;} H1 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 (style and JQ version, just name different) * * 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} </style> <script>/******************************* * @author Mr.thi NK * @author Blog http://mrthink.net/* @2010.08.10 * can be freely reproduced and used, but please specify the copyright *******************************///JQ version $ (f Unction () {var _tab=$ (' Ul.tabnav>li ');//Get Tab navigation var _box=$ ('. Tabbox div ');//Get content Toggle area var _hover= ' hover ';//Current Click on display style var _index;//index value _tab.eq (0). addclass (_hover); The first navigation highlights _tab.click (function () {_index=_tab.index (this); Gets the index value of the current click $ (this). addclass (_hover). Siblings (). Removeclass (_hover);//Current Click Highlight _box.eq (_index). Show (). siblings (). Hide ();//Let the corresponding option content area appear by index value}). EQ (0). Click (); }); Native JS version window.onload=function () {var Tabnav=document.getelementbyid (' Tabnav '); var list=tabnav.getelementsbytagname (' Li '); var Tabbox=document.getelementbyid (' Tabbox '); var divs=tabbox.getelementsbytagname (' div '); var hover= ' hover '//current Click on the displayed style var indexvalue=function (self,obj) {//Get the index value of the function that gets the index position of the current click in navigation for (Var i=0;i< obj.length;i++) {if (obj[i]==self) return i; } }; var index; list[0].classname=hover;//the first default highlight, it is recommended to define the for (Var k=1;k<divs.length;k++) directly in the page {//I use a For loop to define the default display of the first toggle block. Other hidden. This is best defined with CSS, which prevents the page from displaying when it is loaded. Divs[k].style.display= ' None '; for (Var l=0;l<list.length;l++) {//click event List[l].onclick=function () {index=indexvalue (this,list); Use the Indexvalue function defined earlier to take the index value of the current click in the Option Navigator, for (Var m=0;m<list.length;m++) {list[m].classname= (m==index)? Hover: "; Highlight click items and remove other items highlight} for (Var n=0;n<divs.length;n++) {divs[n].style.display= (n==index)? ' Block ': ' none ';//show click on the corresponding option area, hide other}} </script> </pead> <body> <p>mr.think's personal blog @ focus before End technology, love PHP, advocating simple life .</p> <p> return to article page: structure/performance/Behavior Complete Separation tab (JQ version and native JS version) @Mr .think</p> <!--DEMO start-- > <!--JQ version--> <p> JQ version </p> <ul class= "Tabnav" > <li>jquery technology </li> <LI> ; CSS Technology </li> <li>xhtml technology </li> </ul> <div class= "Tabbox" > <div>jquery technology is shown here!@Mr. </div> <DIV>CSS technology is shown here! @Mr. </div> <div>xhtml technology is shown here! @Mr. </div> </div> <!--native JS version--> <p> native JS version </p> <ul id= "Tabnav" > <li>jquery Technology & lt;/li> <LI>CSS Technology </li> <li>xhtml technology </li> </ul> <div id= "Tabbox" > <DIV>JQ Uery technology is shown here! @Mr. </div> <DIV>CSS technology is shown here! @Mr. </div> <div>xhtml technology is shown here! @Mr. </div> </div> <!--DEMO end--> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Core code:
Copy Code code as follows:
JQ version
$ (function () {
var _tab=$ (' Ul.tabnav>li ');//Get tab navigation
var _box=$ ('. Tabbox div ');/get content Switch area
var _hover= ' hover ';//Current Click on display style
var _index;//index value
_tab.eq (0). addclass (_hover);//First navigation highlight
_tab.click (function () {
_index=_tab.index (this);//Get the index value of the current click
$ (this). addclass (_hover). Siblings (). Removeclass (_hover);//Current Click Highlight
_box.eq (_index). Show (). siblings (). hide ();//Let the corresponding option content area appear by index value
). EQ (0). Click ();
});
Native JS version
Copy Code code as follows:
Window.onload=function () {
var Tabnav=document.getelementbyid (' Tabnav ');
var list=tabnav.getelementsbytagname (' Li ');
var Tabbox=document.getelementbyid (' Tabbox ');
var divs=tabbox.getelementsbytagname (' div ');
var hover= ' hover ';//Current Click on display style
var indexvalue=function (self,obj) {//Gets the index value function that gets the index position of the current click in the Navigator
for (Var i=0;i<obj.length;i++) {
if (obj[i]==self) return i;
}
};
var index;
list[0].classname=hover;//the first default highlight, it is recommended to define directly in the page
for (Var k=1;k<divs.length;k++) {//I, for the sake of convenience, use a For loop to define the default display of the first toggle block, and others to hide. This is best defined by CSS, which prevents the page from loading when it is all displayed.
Divs[k].style.display= ' None ';
}
for (Var l=0;l<list.length;l++) {//click event
List[l].onclick=function () {
Index=indexvalue (this,list)//Use the Indexvalue function defined earlier to take the index value of the current click in the option navigation.
for (Var m=0;m<list.length;m++) {
List[m].classname= (M==index)? Hover: ';//Highlight click Item and remove other highlight
}
for (Var n=0;n<divs.length;n++) {
Divs[n].style.display= (N==index)? ' Block ': ' none ';//show click on the corresponding option area, hide other
}
}
}
}
