Question

声明：

使用jquery ui标签，我试图结合从 this website 中获取的2个功能。底部的标签，没有标题的标签。 1.如果我只使用类pos-bottom.it工作。 2.如果我只使用class no-header。它可以工作。

问题： 当我使用这两个类（pos-bottom，no-header）时，CSS会中断。任何人都可以提出原因吗？你可以在下面找到我的JSFIDDLE。

我希望标签底部没有标题。现在，默认选项卡顶部工作正确，没有标题。但是当我在底部强制标签时，我会得到奇怪的边框。

JSFIDDLE尝试： http://jsfiddle.net/bababalcksheep/9PUJ2/

HTML：

<div id="test" class="pos-bottom no-header">
    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
    </ul>
    <div id="tabs-1">tab1</div>
    <div id="tabs-2">tab2</div>
    <div id="tabs-3">tab3</div>
</div>

JS：

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

CSS：

/** tabs with no header **/
.no-header {
    padding: 0px;
    background: none;
    border-width: 0px;
}
.no-header .ui-tabs-nav {
    padding-left: 0px;
    background: transparent;
    border-width: 0px 0px 1px 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
.no-header .ui-tabs-panel {  
    border-width: 1px 1px 1px 1px;
}



/**  pos-bottom **/
.pos-bottom { 
    position: relative; 
    padding-bottom: 3em; 
} 
.pos-bottom .ui-tabs-nav { 
    position: absolute; 
    left: 0.25em; 
    right: 0.25em; 
    bottom: 0.25em; 
    padding: 0em 0.2em 0.2em; 
} 
.pos-bottom .ui-tabs-nav li { 
    border-top: none; 
    border-bottom: 1px solid #ccc; 
    -moz-border-radius: 0px 0px 4px 4px; 
    -webkit-border-radius: 0px 0px 4px 4px; 
    border-radius: 0px 0px 4px 4px; 

} 
.pos-bottom .ui-tabs-nav li.ui-tabs-selected, 
.pos-bottom .ui-tabs-nav li.ui-state-active { 
    margin-top: -1px; padding-top: 1px;
}

底部的jquery-ui-tabs没有标题，css问题

0 个答案: