2

Jsfiddle: http://jsfiddle.net/87YGW/

現在、コンテンツを表示するにはタブ 1 をクリックする必要がありますが、ページを開いたときにタブ 1 のコンテンツが自動的に表示されるようにします。

HTML:

<div id="tab2" class="css-tabs">
        <ul class="noint11_menu">
            <li id="item-1"> <a href="#item-1">Tab 1</a>
                <div>tab conten1
                   </div>
            </li>
            <li id="item-2"> <a href="#item-2">Tab 2</a>
                <div>
                    <p>Tab Content 2</p>
                </div>                
            </li>
            <li id="item-3"> <a href="#item-3">Tab 3</a>
                <div id="notice">
                    <p>tab content 3 </p>
                </div>
            </li>
            <li id="item-4" title="click for Tab 4"> <a href="#item-4">Tab 4</a>
                <div>
                    <p>Tab Content 4</p>
                </div>
            </li>
        </ul>
    </div>​

CSS:

.css-tabs {
    position: relative;
    text-align: left; /* This is only if you want the tab items at the center */
    height: auto
}
.css-tabs ul.noint11_menu {
    list-style-type: none;
    display: inline-block; /* Change this to block or inline for non-center alignment */
}
.css-tabs ul.noint11_menu > li {
    display: block;
    float: left;
}
.css-tabs ul.noint11_menu li > a {
    color: #EEEEEE;
    text-shadow: 1px 1px 1px #000;
    font-family: 'MuliLight', Arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    display: block;

}
.css-tabs ul.noint11_menu li > div {
    display: none;
    position: absolute;
    width: 100%;

}
.css-tabs ul.noint11_menu li > div > p {
    border: transparent;
    padding: 10px;
    margin: 0;
}
.css-tabs ul.noint11_menu li > a:focus {
    border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > a {
    cursor: default;
    border-bottom: 1px solid #fff;
}
.css-tabs ul.noint11_menu li:target > div {
    display: block;
}​

Javascript、Jquery、iframe が使えない

4

2 に答える 2

1

フィドルでデモを行うことはできませんが (iframe のため)、最初のタブに直接リンクすると (例: http://www.yoururl.com/page#item-1)、最初のタブのコンテンツがページの読み込み時に表示されます。

これをテストするには、すべてのコードを新しい空白の html ファイル (CSS とマークアップを適切な場所に配置) に配置し、「test.html」として保存します。次に、次のコードを使用して、同じフォルダー内に別の html ファイルを作成します。

<html>
  <body>
    <a href="test.html#item-1">link</a>
  </body>
</html>

2 番目のファイルを保存して開き、リンクをクリックしてスタイル設定されたページに移動します。最初のタブのコンテンツが表示され、タブの切り替えが期待どおりに機能することに注意してください。

ウィンドウの位置をリダイレクトしたり変更したりする JS がなければ、CSS だけで同じ結果が得られるとは思えません。

CSS の: target 疑似セレクターは、URL のハッシュと要素の ID が同じ場合に一致します。

編集して、別のハッキーだが純粋な CSS「ソリューション」を追加します。

で最初のタブを常に表示し#item-1 div {display: block}、すべてのタブに背景色を設定します。

.css-tabs ul.noint11_menu li > div {
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
    color: #ccc;
    text-align: left;
    padding: 0;
    margin-left: 32px;
    background: #fff; /* added this */
}

他のタブを選択すると、最初のタブが非表示になります。デモ: http://jsfiddle.net/87YGW/3/

于 2012-10-17T00:23:04.853 に答える
1

CSS に以下を追加します。

#item-1 div {display: block}
于 2012-10-17T00:11:26.383 に答える