帶有CSS和html的tabview菜單

我希望以下內容成爲選項卡式視圖。帶有CSS和html的tabview菜單

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

，併爲其

.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;}

的CSS

我怎樣才能使此菜單進入帶有點擊功能而不是懸停的選項卡式視圖菜單，並且使得當標籤正確放置在同一個容器內時顯示的內容。

來源

2012-06-01 Johnny Hankgard

我創建了這個菜單的jsfiddle爲好。 http://jsfiddle.net/Eqsah/1/embedded/result/ –

您將需要使用JavaScript（也許jQuery） – Undefined

肯定需要JavaScript。但是，我不會重新發明那個輪子。使用帶插件的java腳本庫。

jQuery的UI有一個「標籤」控件的位置： http://jqueryui.com/demos/tabs/

來源

2012-06-01 17:55:12 Faust

帶有CSS和html的tabview菜單

回答

相關問題