Question

我希望以下内容成为标签视图。

 <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>

和它的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;}

如何将此菜单设置为带有单击功能而非悬停的选项卡式视图菜单，并使选项卡上显示的内容正确放置在同一个容器内。

Answer 1

绝对需要JavaScript。但是，我不会重新发明那个轮子。使用带有插件的java脚本库。

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

使用css和html的tabview菜单

1 个答案: