将鼠标悬停在javascript标签上,其中包含多个标签组

时间:2012-05-26 12:58:53

标签: javascript tabs

过去几天我一直试图解决这个问题。用新方法一遍又一遍地开始。但我现在被困住了。

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

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

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

我知道它与head部分的javascript和一些CSS有关。

http://www.webpati.com

的主题部分中查看代码http://www.webpati.com/index.txt或包含CSS样式的单个文本文件

任何帮助都会很棒。

1 个答案:

答案 0 :(得分:0)

您需要删除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");
});

});