Question

我一直在尝试创建一些没有图像的圆形标签，这些标签可以在所有浏览器中使用，我已经从不同的地方采集了各种代码并且几乎让它正常工作，唯一的问题是当标签处于活动状态时标签背景颜色不会保持白色。我一直试图解决这个问题几个小时没有运气。它使用csspie作为圆角，你可以在这里查看页面上的一个例子：

http://www.usedcar.co.uk/testtabs.html

任何帮助将不胜感激。我没有设法找到一个没有图像的jquery标签的好例子。

Answer 1

删除额外的大括号，它会破坏你的代码...

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

编辑：这是演示......

工作：http://jsfiddle.net/j6sF5/1

不工作：http://jsfiddle.net/j6sF5/2/（额外大括号）

Answer 2

您可以在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**

Answer 3

以下是工作版本：http://jsbin.com/afina3/8/edit

做了两处修改。第一种是将选定的样式移动到.tabBox .tabs上面的样式：

.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

Answer 4

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

应该修理它：）

Jquery圆形标签跨浏览器（轻微问题）

4 个答案: