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選項卡 - 在選項卡下面沒有行邊框

回答

相關問題