jQuery Rounded Tabs Cross Browser轻微问题

问题描述

| 香港专业教育学院一直试图创建一些不带图像的圆形标签，这些标签在所有浏览器中都有效，我从不同的地方获取了各种代码，并且几乎可以正常工作，唯一的问题是，当标签处于活动状态时，标签背景颜色不会保持白色。香港专业教育学院一直试图解决这个问题，没有运气。它使用csspie的圆角，您可以在这里的页面上查看示例： http://www.usedcar.co.uk/testtabs.html 任何帮助，将不胜感激。我还没有找到没有图像的jquery标签的一个不错的例子。     

解决方法

删除多余的花括号，这会干扰您的代码...

    behavior: url(/pie/PIE.htc);}
}

编辑：这是演示... 工作：http：//jsfiddle.net/j6sF5/1 不起作用：http://jsfiddle.net/j6sF5/2/（大括号）     ,这是一个工作版本：http://jsbin.com/afina3/8/edit 进行了两项更改。首先是将所选样式移到.tabBox上方。

.tabBox .tabs .selected a {
    background: #FFF;
}

.tabBox .tabs a {
    float: left;
    height: 3em;
    line-height: 3em;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    background: #EEE;
    border: 1px solid #BDBDBD;
    border-bottom: 0;
    padding: 0px 15px;
    color: #000;
    font-size:12px;
    text-decoration: none;
    behavior: url(/pie/PIE.htc);}
}

然后，在jQuery代码中，我添加了以下行，以将所选样式添加到标签的标签中：

$(this).find(\'a\').addClass(\"selected\"); //add selected style to the link of this tab

    ,您可以在click事件中或在CSS中（最好在CSS中）解决此问题。 点击：

 $(\'.selected a\').css(\'background-color\',\'white\');

或在CSS中，类似

.selected a{background-color: white;}

在您的CSS中，您有：

.tabBox .tabs .selected a {
    background: #FFF;
}

编辑（您的CSS行为\'PIE.htc \'导致您出现问题）： 在点击结束时，添加：

$(\".tabBox .tabs li\").click(function() {
    $(\".tabBox .tabs li\").removeClass(\"selected\"); //Remove any \"active\" class
    $(this).addClass(\"selected\"); //Add \"active\" class to selected tab
    $(\".tabBox .content\").hide(); //Hide all tab content
    var activeTab = $(this).find(\"a\").attr(\"href\"); //Find the rel attribute value to identify the active tab + content
            $(activeTab).show();
//add-->
    **$(\".tabBox .tabs\").find(\'li[class!=selected]\').find(\'a\').css(\'background-color\',\'#EEE\');
    $(this).find(\'a\').css(\'background-color\',\'#FFF\');**

    return false;
});**strong text**

    ,

.tabBox .tabs a:hover,.tabBox .tabs a:active,.tabBox .tabs .selected a {
    background: none repeat scroll 0 0 #FFFFFF;
}

应该解决它:)