JQuery UI选项卡 - 在选项卡下面没有行边框

我找不到为什么在我的JQuery UI集的第一个选项卡之后有任何选项卡选择，没有行出现在底下。JQuery UI选项卡 - 在选项卡下面没有行边框

照片管理：

enter image description here

<div id="tabs" style="width:750px;margin: 0 auto;"> 
     <ul> 
     <li><a href="#tabs-1" onClick="$('#newJudgeLink').hide(); $('#newUserLink').hide();">New Reports</a></li> 
     <li><a href="#tabs-2" onClick="$('#newJudgeLink').hide(); $('#newUserLink').hide();">Old Reports</a></li> 
     <li><a href="#tabs-3" onClick="$('#newJudgeLink').show(); $('#newUserLink').hide();">Judges</a></li> 
     <li><a href="#tabs-4" onClick="$('#newJudgeLink').hide(); $('#newUserLink').show();">Users</a></li> 
     <li><a href="#tabs-5" onClick="$('#newJudgeLink').hide(); $('#newUserLink').hide();">Other Settings</a></li> 
     </ul>

然后每个div有

<div id="tabs-1"> <!-- stuff --> </div> 
<div id="tabs-2"> <!-- stuff --> </div>

，等我仔细检查过，并确保所有的divs关闭。除了开箱即用的JQuery CSS之外，我没有其他的样式。

标签delaration：

$('#tabs').tabs();

任何帮助将高度赞赏。

来源

2011-10-04 Tim H

随着像萤火虫的工具，你可以检查标签如何CSS改变。有关这方面的更多信息可以更轻松地回答问题。 – Daff

根据达夫的评论，这将是一天结束时的CSS。 CSS中的任何东西都会覆盖jQuery UI选项卡样式，或者某些Javascript也会这样做。一旦呈现文档，您将能够在Firebug（或类似的）以及任何内联样式中看到继承模型（可能由JS应用） –

我刚刚意识到它们只显示在IE，如果这意味着什么。不幸的是，这个网站的用户将主要使用IE浏览器。 –

在我的情况下，我把这一行放在文档的顶部，它工作正常。我在IE中只有这个问题。

<!DOCTYPE html>

来源

2011-11-04 12:44:28 Weslley

你需要重写jQuery UI的风格在原有的风格不包含边界。

在添加到您的样式表：

.ui-tabs .ui-tabs-nav li { 
    list-style: none; 
    float: left; 
    position: relative; 
    top: 1px; 
    margin: 0 .2em -1px 0; 
    border-bottom: 1px !important; 
    padding: 0; 
    white-space: nowrap; 
}

在.ui-tabs .ui-tabs-nav li margin需要原始1px变成-1px和border-bottom: 0px为border-bottom: 1px;

来源

2012-03-02 11:21:55 saumya

JQuery UI选项卡 - 在选项卡下面没有行边框

回答

相关问题