Question

我无法弄清楚为什么在我的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>

等我已经仔细检查并确保所有div都关闭了。除了开箱即用的JQuery CSS，我没有别的风格。

标签宣泄：

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

任何帮助都将受到高度赞赏。

Answer 1

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

<!DOCTYPE html>

Answer 2

您需要覆盖原始样式中不包含边框的 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;

JQuery UI选项卡 - 选项卡下方没有线条边框

2 个答案: