0

2つのタブがあります。基本的に、タブ内のタブ。次に例を示します。画像：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 lielement 内の 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 に答える