JQuery UI Tabs - No line border below tabs_问答_开发者

JQuery UI Tabs - No line border below tabs

开发者 https://www.devze.com 2023-04-10 20:27 出处：网络

I can\'t figure out why any tab selection after the first tab of my JQuery UI set, no line appears underneath.

相关专题：css jquery

I can't figure out why any tab selection after the first tab of my JQuery UI set, no line appears underneath.

Pics:

JQuery UI Tabs - No line border below tabs

<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="$('#newJudgeL开发者_高级运维ink').hide(); $('#newUserLink').show();">Users</a></li>
        <li><a href="#tabs-5" onClick="$('#newJudgeLink').hide(); $('#newUserLink').hide();">Other Settings</a></li>
        </ul>

And then each div has

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

, etc. And I've double checked and made sure all of the divs are closed. I have no other styling aside from the out-of-the-box JQuery CSS.

Tabs delaration:

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

Any help would be highly appreciated.

In my case, I put this line in the top of the document and it works fine. I only had this problem in IE.

<!DOCTYPE html>

You need to override the Jquery UI styles in the original style doesn't contain border.

Add this in to your style sheet:

.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;
}

In .ui-tabs .ui-tabs-nav li margin you need to change original 1px into -1px and border-bottom: 0px into border-bottom: 1px;