2012-05-26 71 views
0

我一直在尝试在过去几天中排除此问题。用新方法一遍又一遍地开始。但我现在卡住了。将鼠标悬停在具有多个选项卡组的JavaScript选项卡上

我有3个容器在我的页面上有垂直对齐的选项卡。第一个容器只包含一个选项卡。这里没问题。

第二个容器有三个选项卡。随着选项卡上的悬停,右侧区域的内容会发生变化。但是当我将鼠标悬停在第二个选项卡上时,第三个容器上显示的内容就会消失。

当我将标签悬停在第三个容器中时,显示其内容,但第二个容器的内容此时消失。最初的选项卡也保持不变。我不知道为什么,但字体颜色被第二个容器覆盖。

我知道它与头部和一些CSS中的JavaScript有关。

看到代码http://www.webpati.com或包括头部分的CSS样式单的文本文件在http://www.webpati.com/index.txt

任何帮助将是惊人的。

回答

0

您需要删除显示无

$(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"); 
}); 

});

+0

我试过了,但是这次在最后一个容器中,文本与第四个容器中的文本重叠。我想这个价值必须被别的东西替代。但感谢您的建议。没有想到这一点。 – Hermes

+0

通过复制javascript函数稍微区别解决了几乎整个问题。我重命名所有从tab开始到tab2的所有内容,并以同样的方式复制了css classes/id。页面上的最后一个错误是最后一个容器中卡住的悬停功能。 – Hermes

相关问题