Small valley practical Jquery (4) -- tab Effect

Small valley practical Jquery (4) -- tab Effect

In the past two days, we have completed the example of 5-5 and 6-6 practices. instance 4 is the implementation method of the tab, instance 5 is the cascade menu drop-down box, and instance 6 is the window effect, which is commonly used by the web layer. more and more people will think that technology is a way of thinking, understanding the ins and outs of achieving results, code is a tool for expression, and logic is displayed in the background, the front-end displays images.

Let's talk about this tab. The first tab consists of two parts. move the cursor over the label and the corresponding content is displayed below. use CSS to achieve the effect of combining tags and content. this time, let's look at the final result first.

HTML:

 
 <Script type = "text/javascript" src = "jquery. js "> </script> <script type =" text/javascript "src =" tab. js "> </script>Tab Effect
 
 

  
  
Label 1
  
  
Label 2
  
  
Tag 3
 
 
I'm content 1, I'm content 2, I'm content 3

CSS:

ul,li{margin:0;padding:0;list-style:none;}#tabfirst li{float:left;background-color:#000066;color:white;margin-right:3px;padding:5px;border:1px solid white;}#tabfirst li.tabin{background-color:#000066;border:1px solid #000066;}div.contentfirst{clear:left;background-color:#000066;color:white;padding:10px;width:300px;height:100px;display:none;}div.contentin{display:block;}

It is worth mentioning that, in many cases, we move the mouse over, not to change the current content, but to accidentally or accidentally touch the mouse. How can we solve this bug, jQuery's power was staged again. yes, we use the setTimeout function. During execution, the expression will be executed after the specified time is delayed after loading, so that we can avoid the vulnerability that changes content during each slide.

JS Code:

Var timeoutId; $ (document ). ready (function () {$ ("li "). each (function (index) {// the code in the function will be executed for each jQuery object packaged with li // index is the index value of the li currently executing this function in the array consisting of all li $ (this ). mouseover (function () {var liNode = $ (this); timeoutId = setTimeout (function () {// hide the originally displayed content area $ ("div. contentin "). removeClass ("contentin"); // clear the class $ ("li. tabin "). removeClass ("tabin"); // The content area corresponding to the current tag is displayed $ ("div "). eq (index ). addClass ("contentin"); $ (liNode ). addClass ("tabin") ;}, 300 );}). mouseout (function () {clearTimeout (timeoutId );});});});

The second tag is different. After you click it, the content area loads the corresponding page, and the interaction with the server during the loading process takes time. Therefore, the friendly prompt effect of "loading" is realized. in addition, the content area is different from the above three Divs, but uses a div block, by loading different content.

HTML:

 
 

  
  
Load the complete page
  
  
Load some pages
  
  
Obtain data remotely
 
 

CSS:

# Tabsecond li {float: left; color: blue; background-color: white; margin-right: 2px; padding: 5px; cursor: pointer;} # tabsecond li. tabin {background-color: # F2F6FB; border: 1px solid black; border-bottom: 0; z-index: 10; position: relative;/* use z-index, position is relative or absolute */} # contentsecond {width: 350px; height: 150px; padding: 10px; background-color: # f2f6fb; clear: left; border: 1px solid black; position: relative; top:-1px;} img {display: none ;}

JS:

// After the entire page is loaded, the content area of tag effect 2 needs to Load Static html page content $ ("# contentsecond "). load ("tabLoad.html"); // locate the three tags corresponding to tag 2 and register the mouse click event $ ("# tabsecond li "). each (function (index) {$ (this ). click (function () {$ ("# tabsecond li. tabin "). removeClass ("tabin"); $ (this ). addClass ("tabin"); if (index = 0) {// load the static complete page $ ("# contentsecond "). load ("tabLoad.html");} else if (index = 1) {// load dynamic page $ ("# contentsecond "). load ("tabLoad. jsp ");} else if (index = 2) {// load remote data (this is also the data output on a dynamic page) $ (" # contentsecond "). load ("tabData. jsp ") ;}}) ;}); // events that start and end when an Ajax request is bound to a loading image $ (" # contentsecond img "). bind ("ajaxStart", function () {// set the content in the div $ ("# realcontent" ).html (""); // before any Ajax interaction on the page starts, the content in the function will be executed $ (this ). show ();}). bind ("ajaxStop", function () {// after any Ajax interaction on the page ends, the function content will be executed $ (this ). hide ();});

The use of jQuery has been enhanced in subsequent projects. Now we can see all kinds of pop-up windows on the web page and special effects such as advertisements, as a matter of fact, when you get to know a lot of things, you can quickly master them. gradually accumulate your own code library. The more you see, the more you write, the more advanced the technology! JQuery is written here, and ajax should also be implemented.