Code to implement simple tabs plug-in functionality in jquery _jquery

The following is the full text.

Let's attach two of the simplest effects of the picture.

Start by writing simple HTML code. Used as a tabs UL label and a P tag containing content.

<ul><li><a href= "#first" > Brighter </a></li><li><a href= "#second" > Glorious Years </a ></li><li><a href= "#third" > Really love you </a></li></ul> for simplicity, I only write three.

<div id= "I" ><p> today I watch the snow drift in the cold night. Floating in the distance with a cool heart ... Still free self, always sing my song, traveled thousands of miles. </p></div>

<div id= "Second" ><p> Bell sounded the signal of home, in his life as if with a little sigh ... Confidence can change the future, ask who can do it. </p></div>

<div id= "Third" ><p> can not be modified by an opponent, bring out the warmth forever in the back ... Please permit me to say, really love you. </p></div>

All appearance without pictures, simple on the line, so all use CSS. Here I pick the more important writing.

Li{float:left;}

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

Div{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 play comes, and that's how to use simple jquery to implement tabs functionality.

Copy Code code as follows:

<script language= "JavaScript" >
$ (function{
$ (' div '). Hide (). Filter (': First '). Show ();//default displays only the contents of <div> labels.
$ (' a '). Click (function () {
$ (' div '). Hide ();
$ (' a '). Removeclass (' selected ');
$ (this). AddClass (' selected ');
$ (' div '). Hide (). Filter (This.hash). Show ();//This step is critical, this.hash means that when clicking on a link, only the content pointed to by the clicked link is displayed. For example, click <a href= "A" > Only show the <div id= "" "
$ (' div ').
). Filter (': First '). Click ();//By default, let it click the button.
});
</script>

The above is all content, the interest can go to casually test. Thank you.