Details of JQuery tab effect examples,

Details of JQuery tab effect examples,

This document describes how to implement the JQuery tab. We will share this with you for your reference. The details are as follows:

In the first tab, the mouse slides over to display different tabs. In the second tab, click different tabs to load the content on other pages. The following figure shows the slow hiding of images waiting for loading:

/WebRoot/4.Tab.html:

<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 
/WebRoot/js/tab. js:
Var timoutid; $ (document ). ready (function () {// locate all tags/* $ ("li "). mouseover (function () {// hide the original content area $ ("div. contentin "). hide (); // The content area corresponding to the current tag is displayed}); */$ ("# tabfirst li "). each (function (index) {// each jquery object packaged with li will execute the code in the function // index is the index value of the li that is currently executing the function code corresponding to the index value in all arrays composed of li // With index after the value, you can find the content area corresponding to the current tag $ (this ). mouseover (function () {var liNode = $ (this); timoutid = setTimeout (function () {// hide the originally displayed content area $ ("div. contentin "). removeClass ("contentin"); // clear the class $ ("# tabfirst li. tabin "). removeClass ("tabin"); // The content area corresponding to the current tag is displayed. // $ ("div "). eq (index ). addClass ("contentin"); $ ("div. contentfirst: eq ("+ index + ")"). addClass ("contentin"); liNode. addClass ("tabin") ;}, 300 );}). mouseout (function () {clearTimeout (timoutid) ;}); // after loading the entire page, the content area of tag effect 2 needs to be loaded with static html page content $ ("# realcontent "). 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 completion page $ ("# realcontent "). load ("TabLoad.html");} else if (index = 1) {// load dynamic page $ ("# realcontent "). load ("TabLoad. jsph2 ");} else if (index = 2) {// mount remote data (this is also the data output on a dynamic page) // $ (" # realcontent "). load ("TabData. jsp "); $ (" # realcontent "). load ("TabLoad. jsp ") ;}}) ;}); // events that start and end when an ajax request is bound to a loading image $ (" # contentsecond img "). bind ("ajaxStart", function () {// clear 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 content in the function will be executed $ (this ). slideUp (5000 );});});
/WebRoot/css/tab.css:
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;}
/WebRoot/TabLoad.html:
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 
/WebRoot/TabLoad. jsp:
<% @ Page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %> <% @ page import = "java. util. * "%> <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 
JQuery and other development knowledge learned in this section:
1. A group of tags are managed by a ul, and each tag is a li In ul. The content under the tag is managed by div.
2. the elements following float will surround the floating element. If you do not want this, you can define the clear attribute on the element after the floating element to clear this effect.
3. The current label and content area can be merged by using the same background color and the current label with the same color border.
4. In JQuery, The mouseover and mouseout Methods correspond to the onmouseover and onmouseout events of standard javascript, and can process the mouse Entry and Exit events.
5. Execute the each method on a JQuery object that contains multiple elements. The content of the function registered to the each method is executed by each element. At the same time, this function can receive a parameter indicating the index value of this element. Many methods in JQuery also use each.
6. The eq method can obtain only one element of multiple elements contained in the JQuery object based on the index value, and still return the new JQuery object corresponding to the element.
7. Use eq in the selector, for example, $ ("div: eq (1 )")
8. The addClass and removeClass methods are used to add and remove the class definitions of elements.
9. the setTimeout method in Javascript can execute some code in a delayed manner, and the corresponding clearTimeout can clear the set delayed operation.
10. When creating an AJAX application, you can consider debugging on FireFox and then check it in other browsers to fix possible compatibility issues.
11. The cursor attribute can control the mouse style on the element. The attribute value of pointer indicates the hand style, which is our common link mouse style.
12. The position attribute can control the method of element positioning. If the value is relative, it indicates Positioning relative to the original position. You can set the top, left, bottom, and right values.
Move the control element relative to the original position
13. z-index can control the height of an element on the page. A larger value will overwrite some elements with a lower z-index value in the front of the page layer. Z-index takes effect only when the position value is relative or absolute.
14. The load method in JQuery is very powerful. You can load data from a specified static, dynamic page or server program to the elements encapsulated by the JQuery object that executes the load method.
15. The load method also supports partial loading. Add a space after the loaded page address, and then use the selector to load the part that conforms to the selector in the page.
16. The load page must be UTF-8 encoding, otherwise the loaded Chinese will appear garbled.
17. bind can be used to bind Javascript events or events defined in JQuery to a specified node. You can use this method to register events that do not directly provide the registration method in JQuery. The second parameter of the method can be the method definition for event execution.
18. ajaxStart and ajaxStop correspond to events before and after ajax interaction. After these events are registered for a node, before and after the ajax interaction on the current page, the specified method is executed.
I hope this article will help you with jQuery programming.
Articles you may be interested in:

   

 
    
Dynamic addition of tabs tab in jQuery EasyUI Layout
 
    
Two examples of JQuery tab effect (4)
 
    
JQuery EasyUI API Chinese Document-Tabs TAB/Tab
 
    
Create a jquery tab
 
    
JQuery Tab Label Switching
 
    
Code for implementing Label Switching in jquery
 
    
JQuery learning notes for image flip and TAB Switch