Question

我有两个标签。基本上，选项卡中的选项卡。以下是一个示例：图片：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>

感谢您的帮助！

Answer 1

看到你的HTML会有所帮助，但真正的问题是你的CSS。 #tabs .nav li将在元素#tabs中使用类.nav获取每个元素下的每个li。换句话说，你在这里有非常重叠的CSS。

尝试使用一些儿童选择器，如：

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

此外，有关jQueryUI如何做到的更多信息，see here

Here is jsFiddle让你合作并试用。

Jquery UI选项卡 - 多个选项卡（垂直）问题

1 个答案: