单击图像时如何在另一个Div中显示相关内容

Question

I have a div area (for main slider. But there will not be sliding inside). And under this div area there is a tab system.

In these tabs there are 1-6 images (In each tab there are another images (1 to 6 images)

When I click one of these images I want to show the related content / photo etc in this Div area above.

How can I do that? Any example? Any clue?

I tried to use jquery for show/hide, toggle etc but for example I couldnt find how to keep those big divs unvisible within my html (I tried css "display:none;" but that didn't seem to me wise enough) and call them in its place (above of the tab system)

PS: when an image is shown the others must be hidden.

Answer 1

Here you are demyr obviously you will have to modify to your exact needs:

http://jsfiddle.net/S4LGr/1/

It is no problem here is the updated code, edit as you need you should really be able to take it from here:

http://jsfiddle.net/S4LGr/3/

I changed the images on this one so you can actuall see it happen, very similiar to ford.ca:

http://jsfiddle.net/S4LGr/5/

Here you go man all the pieces brought together:

http://jsfiddle.net/S4LGr/9/

totallyFeelLikeIdidYourHomeWork lol you owe me a beer!

Answer 2

you can bind a function on all images/text that loads the relevant images/text to the detail div. Like this fiddle: http://jsfiddle.net/9jc46/