Toggle between headline content that is common in jquery

Yesterday in the background group to do a small function of the time encountered, very basic, but also very commonly used, write down to everyone to study together.

For example, a function like this is required, such as:

The title of the top row and the caption of the side can be switched to each other. This effect is very common when browsing the web.

First of all, we first say the title between the switch, after the title and content to switch together.

I give every title in the top row the uniform class name is top, and then the style that is rendered after the click is written in the. Hover.

Working with jquery:

$ ('. Top '). Click (function () {

$ ('. Top '). Removeclass (' hover ');

$ (this). addclass (' hover ');

})

This is OK ~ you can switch!

Here is the topic of the switch between the content, there are many ways to achieve, but for the love of jquery, I still use it to achieve ~

First of all in the structure of the title and the content of the corresponding attributes ~ For example, I gave the top of each top title with the tab, so that sub-12345 in turn open ~

Then add the corresponding attributes to the corresponding content, such as Rel, or you like the other can be ~you choose! You like!

But a little I still need to emphasize ha! The Content property value corresponding to the title is best written in the same ha ~

In order to facilitate everyone to see, I introduce my structure, I above each title class= "Top", then I gave them in turn added tab= "1" tab= "2" tab= "3" ...

I am all class= "con", and then I add a rel to them, which in turn is rel= "1" rel= "2" rel= "3" ....

Many do not say, directly on the code:

Easy to understand under comments ha ~

Forget it, the code is put out:

$ ('. Hr_right '). Delegate ('. Top ', ' click ', function () {//Bind event
var Own_tab = $ (this). attr (' tab '); Get the Tab property value for a caption
Select (Own_tab); Execute the Select function
});
function Select (own_tab) {//Pass in the property value obtained above as a parameter
var tab = Own_tab;
$ ('. Con '). Hide (); Hide all content areas
$ ('. con[rel= ' +tab+ ') '. Show (); Let the con show the value of rel and the value of the tab equal

}

All right, that's it!

Found a problem wood has ~jquery a kind of reverse thought, do not know the description is not enough accurate, but I think so, such as you want to reach the current element after clicking the current element into a special color, all other elements of the same class become another color, then when you add a click event, Most people think of the current element to add the color you want to the class name, and then remove the class name of the sibling element, but, if you really do this, is not up to the kind of effect you want!

The correct idea is to remove the class name of the style you want to display after all the elements, and then add the class name of the style you want to display to the currently clicked Element! The title and the corresponding content display is the same reason, first hide all the content, and then display the relative content ~

qq:503147874 Welcome to Exchange ~

Toggle between headline content that is common in jquery