基础标签不起作用

我用基金会5.3与翡翠和表达。基础标签不起作用

我创建了一个tab组件，粘贴了来自Foundation Docs的代码，但它似乎不起作用。

我包括了我认为足够的css和js，但是，只有在标签中的活动标签可以显示，对于其他人，当我单击标签的标签时，它不显示。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Profile | Login System</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="/css/foundation.min.css" rel="stylesheet"> 
</head> 

<body> 
    <nav class="top-bar"> 
     <ul class="title-area"> 
      <li class="name"> 
       <h1><a href="/">Homepage</a></h1> 
      </li> 
     </ul> 
     <section class="top-bar-section"> 
      <ul class="right"> 
       <li><a href="/profile" class="button success">12</a></li> 
      </ul> 
     </section> 
    </nav> 
    <div class="row"> 
     <div class="large-8 large-centered columns"> 
      <br> <br> 
      <h1 class="text-center">Welcome to Login System!</h1> 
      <h2 class="text-center">This is Profile Page</h2> 
      <br> 
      <hr> 
      <br> 
      <ul class="tabs" data-tab> 
       <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li> 
       <li class="tab-title"><a href="#panel2-2">Tab 2</a></li> 
       <li class="tab-title"><a href="#panel2-3">Tab 3</a></li> 
       <li class="tab-title"><a href="#panel2-4">Tab 4</a></li> 
      </ul> 
      <div class="tabs-content"> 
       <div class="content active" id="panel2-1"> 
        <p>First panel content goes here...</p> 
       </div> 
       <div class="content" id="panel2-2"> 
        <p>Second panel content goes here...</p> 
       </div> 
       <div class="content" id="panel2-3"> 
        <p>Third panel content goes here...</p> 
       </div> 
       <div class="content" id="panel2-4"> 
        <p>Fourth panel content goes here...</p> 
       </div> 
      </div> 
     </div> 
    </div> 

    <script src="/js/foundation.min.js" type="text/javascript"></script> 
    <script src="/js/vendor/modernizr.js" type="text/javascript"></script> 
    <script src="/js/foundation/foundation.tab.js"></script> 
    <script> 
     $(document).foundation(); 
    </script> 
</body> 
</html>

来源

2014-07-18 Zhen Zhang

嗯......我已经修复了这个烦人的问题。

我查看从Foundation下载的模板页面，我只是将foundation.min.css foundation.min.js modernizr.js jquery.js的使用顺序更改为与下面的官方顺序相同的顺序。和它的作品......

<!doctype html> <html class="no-js" lang="en"> <head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title>Foundation | Welcome</title> 
    <link rel="stylesheet" href="css/foundation.css" /> 
    <script src="js/vendor/modernizr.js"></script> </head> <body> 

    <div class="row"> 
     <ul class="tabs" data-tab> 
     <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li> 
     <li class="tab-title"><a href="#panel2-2">Tab 2</a></li> 
     <li class="tab-title"><a href="#panel2-3">Tab 3</a></li> 
     <li class="tab-title"><a href="#panel2-4">Tab 4</a></li> 
     </ul> 
     <div class="tabs-content"> 
     <div class="content active" id="panel2-1"> 
      <p>First panel content goes here...</p> 
     </div> 
     <div class="content" id="panel2-2"> 
      <p>Second panel content goes here...</p> 
     </div> 
     <div class="content" id="panel2-3"> 
      <p>Third panel content goes here...</p> 
     </div> 
     <div class="content" id="panel2-4"> 
      <p>Fourth panel content goes here...</p> 
     </div> 
     </div> 
    </div> 
    </div> 
    <script src="js/vendor/jquery.js"></script> 
    <script src="js/foundation.min.js"></script> 
    <script> 
     $(document).foundation(); 
    </script> </body> </html>

来源

2014-07-18 06:21:10

我也遇到这样的问题，以及一些研究之后我发现：

你并不需要加载“的js /基础/ foundation.tab.js”
最奇怪的是，如果添加TYPE =‘JavaScript的’属性的基础的脚本，然后它不工作

另外，作为张真之前写的，不要乱与文件订单！这个订单必须和之前写的张振一样

来源

2016-07-21 01:34:36

我有一个类似的问题 - 不完全是这里描述的问题，但我也有基础标签没有显示他们的内容，因为内容是动态的（滑动轮播）。如果有人在这里同样的问题是concretetly我做过什么来解决这个问题：

假设HTML看起来像

 <ul class="tabs" data-tabs id="my-tabs"> 
     <li class="tabs-title is-active"><a href="#my-tab1" aria-selected="true">MyTab1</a></li> 
     <li class="tabs-title"><a href="#my-tab2">MyTab2</a></li> 
     </ul> 
     <div class="tabs-content" data-tabs-content="my-tabs">

则只是在机身的末尾添加下面的JavaScript：

$("#my-tabs").on('change.zf.tabs', function(event){ 
     $(window).resize(); 
    })

来源

2017-07-20 19:08:59 beck

基础标签不起作用

回答

相关问题