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 脚本库。

jQuery 的 UI 在这里有一个“选项卡”小部件：http: //jqueryui.com/demos/tabs/

于 2012-06-01T17:55:12.863 回答