[ORIGINAL + Source Code] ultra-simple: jquery-based tabs (sliding doors)

Part 1 Article I have introduced in detail how to use jquery to bring up various window effects, which has aroused the response of many friends, today, I would like to share with you a new jquery-based "Sliding Door" (the tab that slides with the mouse). I hope it will be helpful to my friends, next we will analyze how to implement a tab that slides with the mouse.
It is actually very easy to achieve this effect. Let's take a look at the effect first.

Based on the above results, how can we implement it using jquery technology? Let's make a simple analysis,

First, we need to have some small Div labels for displaying each of the table tabs ,.
Second, define a div that is slightly larger to display the content. The corresponding number is also
Finally, the initialization tab and content layer are the first content to be displayed. Then we try to use the jquery selector to select all tabs, add mouse hover events, and traverse all tabs, determine whether the jquery object is currently hovering over the mouse, and then set the style.
The above theory alone is not very clear.CodePost it for your reference and read the codeProgram
The source code is as follows:

Code:

Jquery achieves common sliding door Effects

• Label 1
• Label 2
• Tag 3

Label 1 content text label 2 content text label 3 content text

Download source code:
Jquery-door.html

[Original address] [Source Code download] [more original, more supported]

Recommended:

[Multi-image + detailed description] full demonstration of the android Development Environment (JDK + eclip + Android SDK)