0

我有两个标签。本质上，选项卡中的选项卡。这是一个例子：图片：http: //i45.tinypic.com/35k0uhg.png

标签为红色
子标签为蓝色

选项卡应该是垂直的（正常工作），而子选项卡是水平的。但是，正如您在上面看到的，子选项卡也是垂直的。由于一些奇怪的原因，我无法弄清楚如何在选项卡保持垂直时使子选项卡水平。

子选项卡应该如下所示：

图片：http: //i47.tinypic.com/k9c01d.png

标签代码

#tabs {
    position: relative;
    padding-left: 14.5em; /* content */
    margin-right: 5px;
    padding-top: 20px;
    background: transparent;
    border: none;
    /*  height: 30em; */
}

#tabs .nav {
    position: absolute;
    left: 0.25em;
    top: 1.5em;
    bottom: 0.25em;
    width: 16em; /* tabs width */
    padding: 0.2em 0 0.2em 0.2em;
    background: transparent;
    border: none;
}

#tabs .nav li {
    right: 1px;
    width: 100%;
    border: none;
    overflow: hidden;
}

#tabs .nav li a {
    float: left;
    width: 100%;
    margin-bottom: 3px;
    height: 24px;
    padding-top: 14px;
    padding-left: 15px;
    font-weight: bold;
    color: #2e2e2e;
    background: #fff;
}

#tabs .nav li a:hover {
    cursor: pointer;
    background: #206fbf;
    color: #fff;
}

#tabs  .nav li.ui-tabs-selected a {
    cursor: pointer;
    color: #fff;
    background: #206fbf;
}

子标签的代码

#Sub-Tabs {
    background: transparent;
    border: none;
    position: none;
    list-style: none;
}
#Sub-Tabs .ui-widget-header {
    background: transparent;
    border: none;
    border-bottom: 1px solid #c0c0c0;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    position: none;
}
#Sub-Tabs .ui-state-default {
    background: transparent;
    border: none;
}
#Sub-Tabs .ui-state-active {
    background: transparent url(img/uiTabsArrow.png) no-repeat bottom center;
    border: none;
}
#Sub-Tabs .ui-state-default a {
    color: #c0c0c0;
}
#Sub-Tabs .ui-state-active a {
    color: #459E00;
}




HTML部分：

<div id="tabs">
    <ul class="nav">
        <li><a href="#test">Testing Area</a></li>
        <li><a href="#upgradereq">Upgrade Requirements</a></li>


    </ul>

    <div id="test">
        <div id="sub-tabs">
            <ul>
                <li><a href="#helloworld">Hello World</a></li>
                <li><a href="#main">Main</a></li>
            </ul>

            <div id="helloworld">Hellow rold!</div>
            <div id="main">afsa</div>
        </div>
    </div>

    <div id="upgreadereq">afsa</div>
</div>

感谢您的帮助！

4

1 回答 1

1

查看您的 HTML 会有所帮助，但真正的问题是您的 CSS。#tabs .nav li将在 element 中使用 class .nav 获取每个元素下的每个 li #tabs。换句话说，这里有极端重叠的 CSS。

尝试使用一些子选择器，例如：

#tabs .nav > li {}
/* Where ">" says 'Hey, grab only the li elements immediately within .nav!' */

此外，有关 jQueryUI 如何执行此操作的更多信息，请参见此处

这是 jsFiddle供您使用和试用。

于 2012-10-29T16:22:00.147 回答