horizontal menu li hover div content show

Question

I have two div elements in my html page.Left side div contains horizontal list of anchor elements.Right side div contains content for current anchor element on which mouse hovers,It should change when i hover the mouse on a link present in left side div.When i hover the mouse outside, the last items content should display on right side div.

Any help using javascript or jquery?

Answer 1

You can add a data-showdiv attribute to your a link with the div id in it. put all content div with a class and id in display:none; then with jquery :

$('a.item').hover(function(){
   $('.class').hide();
   $('#'+$(this).data('showdiv')).show();

});