2014-04-10 63 views
2

我在Foundation版本5.2.2上有一組垂直選項卡。該代碼看起來是這樣的:data-options =「is_hover:true」在Foundation上不工作5.2.2

<div id="projects" data-dropdown-content class="f-dropdown content"> 
    <h6>Gestión de proyectos</h6> 
    <dl class="tabs vertical projects-tabs" data-tab data-options="is_hover:true"> 
    <dd class="active"><a href="#panel1a">Tab 1</a></dd> 
    <dd><a href="#panel2a">Tab 2</a></dd> 
    <dd><a href="#panel3a">Tab 3</a></dd> 
    <dd><a href="#panel4a">Tab 4</a></dd> 
    </dl> 
    <div class="tabs-content vertical"> 
    <div class="content active" id="panel1a"> 
     <ul class="projects-tabs-links"> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     </ul> 
    </div> 
    <div class="content" id="panel2a"> 
     <ul class="projects-tabs-links"> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 3</a></li> 
     </ul> 
    </div> 
    <div class="content" id="panel3a"> 
     <ul class="projects-tabs-links"> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 3</a></li> 
     <li><a href="#">Link 4</a></li> 
     </ul> 
    </div> 
    <div class="content" id="panel4a"> 
     <ul class="projects-tabs-links"> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 3</a></li> 
     <li><a href="#">Link 4</a></li> 
     <li><a href="#">Link 5</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

的想法是徘徊在選項卡時要顯示每個選項卡的內容,但是當我設置數據選項=「is_hover:真正的」關於他們,這是行不通的。我檢查了foundation.tab.js,看看是否一切正常,一切似乎都沒問題。 正如您在this link中看到的,最近添加了對選項卡的is_hover支持。

你知道爲什麼這樣不起作用嗎? 感謝先進!

回答

0

我能夠讓你的例子工作,一旦我從外部div中刪除類f-dropdown。你可以在這裏看到我的工作示例,http://cdpn.io/zgtkG

如果您不是CodePen的家庭成員,則會有一個鏈接/按鈕在底部編輯此筆。一旦你到達編輯器,你可以點擊JS和CSS旁邊的齒輪圖標來查看我對Foundation 5.2.2的參考。

我希望有幫助, -Adam