Jquery Rounded Tabs Cross Browser (小问题)答案

【问题标题】：Jquery Rounded Tabs Cross Browser (slight problem)Jquery Rounded Tabs Cross Browser (小问题)
【发布时间】：2011-04-14 14:59:11
【问题描述】：

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

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

任何帮助将不胜感激。我还没有找到一个没有图像的 jquery 选项卡的好例子。

【问题讨论】：

您是在所有浏览器还是某些浏览器上都遇到这个问题？
我最近的所有大客户（财富 500 强类型）都对 Jquery UI 选项卡非常满意，这些选项卡在 IE6/7 上优雅地降级为方形。这是一个比使用图像更清洁的解决方案，并且比黑客攻击这两种浏览器的开销要少得多，这两种浏览器在宏伟的计划中并不重要。真的，如果少数用户看到的是方形而不是圆形，会有什么损失？实际上，我不得不向一些没有注意到的用户指出不同之处。只是说'
为什么不使用 jQuery UI 的tabs？您可以使用ThemeRoller 来设置您喜欢的样式，并且它们可以跨浏览器兼容并且可以很好地降级（正如@bpeterson76 所说）。

标签： jquery html css tabs

【解决方案1】：

去掉多余的花括号，它会干扰你的代码......

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

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

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

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

【讨论】：

【解决方案2】：

这是一个工作版本：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

【讨论】：

我做了一些修改，新的在下面的页面：usedcar.co.uk/testtabs2.html，问题是在IE8中，每次点击一个新标签，之前的标签的背景都会保留白色而不是变回灰色。
尝试将此行添加到 jQuery 以从链接中删除选定的类： $(".tabBox .tabs li a").removeClass("selected"); //删除任何“活动”类

【解决方案3】：

您可以在单击事件中或在 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**

【讨论】：

嗨，我已经改变了这个，让它在 firefox 和 chrome 中正常工作，但是在 IE7 中，每次你点击一个新标签时，前一个标签保持白色并且不会变回灰色。
在 css 中切换 a:active 和 .selected a 的顺序
我做了一些改动，新的在下面的页面：usedcar.co.uk/testtabs2.html，问题是在IE8中，每次点击一个新标签，之前的标签的背景都会保留白色而不是变回灰色。
使用 jquery，你的 htc 文件会覆盖你的 css 样式。

【解决方案4】：

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

应该修复它:)

【讨论】：