jquery Combat---tab effect

In the previous blog, the small part of the main simple introduction of jquery some basic knowledge, today this blog, small series continue to learn the relevant knowledge of jquery, today we come to learn a small example of a tab, the relevant source code has been uploaded, the need for a small partner to download Oh ' (*∩_∩*) , click to download! Let's start by looking at the final.

As shown in the above image, this page contains two parts, there is a tab on each page, we often in the Web application, see the tab effect, the main role is in the visible area within a limited area, in a certain area to show some content to the user, above a tab, we call sliding door technology, Mouse movement understand a certain label, the content will follow the change, well, for this small example of the implementation of the effect of the first introduced here, and then, we began to write our code, first, we look at the HTML code how to write Nie, the code is as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >

Let's look at the effect of the operation, what kind of surprise will be waiting for us?

Can be found, after writing the HTML code, we run the effect as shown, but this effect and we ultimately need to achieve the effect of 108,000 miles, but the work of the HTML has been completed, because the page only these content, as to how to show a tab effect, is the work of CSS, and then, Let's write the code for the CSS as follows:

ul,li{   margin:0;   padding:0;   List-style:none; } li{    Float:left;background-color: #868686; color:white;padding:5px;margin-right:2px;border:1px solid White;} li.tabin{   background-color: #6E6E6E;   border:1px solid white; }div{clear:left;background-color: #6E6E6E; color:white;width:300px;height:100px;padding:10px;display:none;} Div.contentin {display:block;}

let us analyze the above code, we found a set of labels with a UL to manage, each label is a li in the UL, the content below the tag is to use DIV to manage. What would the effect be like after you've written the CSS? Let's look at the effect of the operation:

At this point, our CSS code to write the work has been completed, CSS guarantee in the absence of JS, the effect of the tab page can still be displayed to the user, and then, we have to write JS code, corresponding, in JS we also want to build two files, a jquery a tab, In view of the jquery code is more, so the small part has uploaded the relevant resources, the need for a small partner to download the link, and then we write the tab code, to organize the page to add capacity, the code is as follows:

var timoutid;$ (document). Ready (function () {///Find all label/*$ ("Li"). MouseOver (function () {//To hide the original displayed content area $ (" Div.contentin "). Hide ();//the content area corresponding to the current tag is displayed}), */$ (" #tabfirst li "). each (index) {// Every jquery object that wraps Li executes the code in the function//index is the index value of the LI corresponding to all Li's array currently executing this function code//After having the value of index, you can find the content area corresponding to the current label ( This). MouseOver (function () {var LiNode = $ (this); Timoutid = SetTimeout (function () {//) hides the previously displayed content area by $ ("Div.contentin") . Removeclass ("Contentin");//For Li Clear Tabin class$ ("#tabfirst li.tabin") with Tabin class definition. removeclass ("Tabin");// The content area corresponding to the current label is displayed//$ ("div"). EQ (index). addclass ("Contentin"), $ ("Div.contentfirst:eq (" + Index + ")"). AddClass (" Contentin "), Linode.addclass (" Tabin ");},300);}). Mouseout (function () {cleartimeout (Timoutid);});

let's look at the running effect as shown in:

At this point, the effect of our first tab has been written, and then we write the effect of the second tab, here, the small series of warm reminders, the second tab of the Code, the small part is on the basis of the first tab effect added, OK, to see how the effect of our second tab page is implemented NIE , first, let's look at the HTML code as follows:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >

Next , let's write the code for the CSS as follows:

Ul,li {margin:0;padding:0;list-style:none;} #tabfirst li {float:left;background-color: #868686; color:white;padding:5px;margin-right:2px;border:1px solid White;} #tabfirst Li.tabin {background-color: #6E6E6E; border:1px solid #6E6E6E;} Div.contentfirst {clear:left;background-color: #6E6E6E; color:white;width:300px;height:100px;padding:10px;display : none;} Div.contentin {display:block;} #tabsecond li {float:left;background-color:white;color:blue;padding:5px;margin-right:2px;cursor:pointer;} #tabsecond Li.tabin {background-color: #F2F6FB; border:1px solid black;border-bottom:0;z-index:100;position:relative ;} #contentsecond {width:500px;height:200px;padding:10px;background-color: #F2F6FB; clear:left;border:1px solid black; Position:relative;top: -1px;} img {display:none;}

Finally, write the JS code, the specific code is as follows;

        

var timoutid;$ (document). Ready (function () {///Find all label/*$ ("Li"). MouseOver (function () {//To hide the original displayed content area $ (" Div.contentin "). Hide ();//the content area corresponding to the current tag is displayed}), */$ (" #tabfirst li "). each (index) {// Every jquery object that wraps Li executes the code in the function//index is the index value of the LI corresponding to all Li's array currently executing this function code//After having the value of index, you can find the content area corresponding to the current label ( This). MouseOver (function () {var LiNode = $ (this); Timoutid = SetTimeout (function () {//) hides the previously displayed content area by $ ("Div.contentin") . Removeclass ("Contentin");//For Li Clear Tabin class$ ("#tabfirst li.tabin") with Tabin class definition. removeclass ("Tabin");// The content area corresponding to the current label is displayed//$ ("div"). EQ (index). addclass ("Contentin"), $ ("Div.contentfirst:eq (" + Index + ")"). AddClass (" Contentin "), Linode.addclass (" Tabin ");},300);}). Mouseout (function () {cleartimeout (Timoutid);}); /After the entire page is loaded, the content area of the label Effect 2 needs to be loaded into the static HTML page content $ ("#realcontent"). Load ("alltab.html");//Find the label 2 effect corresponding to three tags, register mouse click event $ ("# Tabsecond Li "). (function (index) {$ (this). Click (function () {$ (" #tabsecond li.tabin "). Removeclass (" Tabin "); $ ( This). AddClass ("Tabin"); if (index = = 0) {//Load Static finish page $ ("#realconteNT "). Load (" alltab.html ");} else if (index = = 1) {//Load Dynamic partial page $ ("#realcontent"). Load ("alltab.html H2");} else if (index = = 2) {//Mount Remote data (This is also a dynamic page output data) $ ("#realcontent"). Load ("alltab.html span")}); /For loading picture binding Ajax request start and interactive End event $ ("#contentsecond img"). Bind ("Ajaxstart", function () {//) empty the contents of the div by $ ("#realcontent" ). HTML ("");//The contents of the function are executed $ (this) before any Ajax interaction begins in the entire page. Show ();}). Bind ("Ajaxstop", function () {////entire page after any Ajax interaction ends, the contents of the function are executed $ (this). Slideup ("1000");});

Finally, let's look at the effect of the run as shown in:

Small Seriesof words: jquery actual combat, the label page effect of the explanation, to here and the small partners say goodbye, the relevant source code, small series has been uploaded, the need for a small partner can click Download Oh ' (*∩_∩*), through this small example of learning, We know that Z-index can control the layer height of the element in the page, the higher the value will be in the page's layer, will also cover some of the lower Z-index value elements, only position value is relative or absolute elements, Z-index will take effect. The Load method in jquery is powerful in that it can load data from a specified static, dynamic page, or server-side program into an element wrapped in a jquery object that executes the load method. In addition, we also learned that bind can be used to bind the specified node JS event or jquery defined in the event, for jquery does not directly provide the registration method of the event, can be registered in this way, the second parameter of the method can be the method definition of the event execution. Through a small example of learning, we have learned a lot, but also know a lot, but all the harvest and understand, we need to do their own hands, to practice!

jquery Combat---tab effect