0

以下をタブ表示にしたい。

 <div id="navigation">

<ul class="secondbakedmenu">
<li><a href=".html">Images</a>
<ul>

<li>



</li>

    <dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

<li>

<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

</li>

<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

<li>

<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

</li>
<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

<li>

<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

</li>

<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

<li>

<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

</li>

<dt>Images</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>

</ul>


<dl>
<ul class="secondbakedmenu">
<li><a href=".html">Previews</a>
<ul>

<li>
<dt>Preview</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>
</li>

<li>
<dt>Preview</dt>
<dd></dd>
<a href=".html">SSX<img src="" height=100 width=120/></a>
</li>

<li>
<dt>Preview</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>
</li>

<li>    
<dt>Preview</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>
</li>

<li>
<dt>Preview</dt>
<dd></dd>
<a href=".html"><img src="" height=100 width=120/></a>    
</li>


<ul class="secondbakedmenu">
<li><a href=".html">All Updates</a>
<ul>
<li><a href=".html">1</a></li>
<li><a href=".html">2</a></li>
<li><a href=".html">3</a></li>
<li><a href=".html">4</a></li>
<li><a href=".html">5</a></li>
</ul>

</ p>

そしてそれのためのCSS

.secondbakedmenu {list-style: none;
         float: left;
         margin-top: 15px;
         margin-left: -20px;}

.secondbakedmenu li>a{color: white;
            font-size: 12px}

.secondbakedmenu li{font-family: Berlin Sans FB;
          } 

.secondbakedmenu li ul {position: absolute;
                        display: none;}

.secondbakedmenu a:hover{text-decoration: none;
                        color: white;
        text-shadow: 1px 1px 1px blue;

        }   

.secondbakedmenu li:hover ul {
                     display: block;
                     list-style-type: none;
                     }

ul.secondbakedmenu li:hover{margin: 0;
                            padding: 0;}

このメニューをホバーの代わりにクリック機能を備えたタブ付きビューメニューにし、タブを付けたときに表示されるコンテンツを同じコンテナ内に適切に配置するにはどうすればよいですか。

4

1 に答える 1

2

間違いなくJavaScriptが必要です。しかし、私はその車輪を再発明しません。プラグインでjava-scriptライブラリを使用します。

jQueryのUIには、ここに「タブ」ウィジェットがあります：http: //jqueryui.com/demos/tabs/

于 2012-06-01T17:55:12.863 に答える