Question

I have been trying to sort this problem out for the last few days. Started over and over again with new approaches. But I’m stuck now.

I have 3 containers on my page with vertical aligned tabs. The first container contains only one tab. No problem here.

The second container has three tabs. With a hover on the tabs the content on the right area changes. But when I hover at the second tab the displayed content on the third container disappears.

When I hover a tab in the third container its content is displayed but the content of the second container disappears this time. The initial tab keeps also stuck. I don’t know why but also the font color is overwritten by the second container.

I know it has to do with the javascript in the head section and some CSS.

To see the code http://www.webpati.com or as single text file including CSS styles in head section at http://www.webpati.com/index.txt

Any help would be amazing.

Answer 1

You need to remove the display none

$(document).ready(function() {

$(".tabs .tab[id^=tab_menu]").hover(function() {
    var curMenu=$(this);
    $(".tabs .tab[id^=tab_menu]").removeClass("selected");
    curMenu.addClass("selected");

    var index=curMenu.attr("id").split("tab_menu_")[1];

    $(".curvedContainer .tabcontent").css("display","none");<----------**HERE**


    $(".curvedContainer #tab_content_"+index).css("display","block");
});

});