Code for implementing Simple tabs plug-in functions in jquery _ jquery-js tutorial

Jquery has changed the way programmers write javascript. As a beginner and fan of jquery, I recently learned to use a few jquery code statements to implement functions similar to the tabs plug-in, I believe this article will help many beginners of jquery and those who want to implement the tabs plug-in function. Let's get down to the truth. Here is the full text.

First, attach two of the simplest ones.

First, write simple HTML code. The UL label used as the tabs and the p label containing the content.

• Sea sky
• Glorious years
• Really love you

For simplicity, I only write three.

Today, I watched the snow float in the cold night. With the cooling of the nest floating far ...... Still self-free, always sing my song, travel thousands of miles.

The bell rings the signal of returning home, and it seems to be a bit of a sigh in his life ...... Self-confidence can change the future and ask who can do it.

A pair of hands that cannot be modified, bringing warmth always behind the scenes ...... Please let me say that I really love you.

No image is needed for all appearances, which is simple and simple, so CSS is used for all appearances. Here I will pick out more important writing.

Li {float: left ;}

A {display: block; border: solid 1px #000 ;}

P {border: solid 1px #000; margin-top =-1px ;}

. Selected {border-bottom-color: # FFF; color: # F00;} // set the border color at the bottom of the selected tab to the same color as the content background.

The most important thing is how to use jquery to implement the tabs function.

The Code is as follows: