基础顶部栏不工作 - 我做错了什么？答案

【问题标题】：Foundation’s topbar isn’t working — what have I done wrong?基础顶部栏不工作 - 我做错了什么？
【发布时间】：2015-02-21 22:02:32
【问题描述】：

我试图让你使用 Foundation 的 Topbar 功能来设计我的导航，但我现在得到的只是一个完全没有格式的项目符号列表。我现在没有链接我自己的 CSS 或 JS 代码，它们都是基本的外部东西，比如 jQuery 和 Foundation。我已经链接了 Foundation 的所有 Javascript 和 CSS 文件，如下所示，我的浏览器控制台反映我没有错误；我在 HTML 中调用的所有文件都已找到。我错过了什么？为什么顶部栏没有出现？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <!-- Page metadata. -->
  <meta charset="UTF-8">
  <meta name="viewport" />
  <title>Coding &amp; Design in INFO250</title>
  <!-- Linked CSS files. -->
  <link href="css/external/foundation.min.css" />
  <link href="css/external/normalize.css" />
  <link href="css/app.css" rel="stylesheet" type="text/css" />
  <link href="css/media.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <nav class="top-bar" data-topbar role="navigation">
    <section class="top-bar-section">
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">Coding &amp; Design in INFO250</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>
        </li>
      </ul>

      <ul class="right">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#">Section 508</a>
        </li>
        <li><a href="#">MySQL</a>
        </li>
      </ul>
    </section>
  </nav>
  <div class="bg-holder splash1">
    <div class="container">
      <h1>Coding &amp; Design</h1>
      <h3>in INFO250</h3>
    </div>
  </div>

  <!-- JavaScript, linked and otherwise. -->
  <script src="js/external/jquery-2.1.3.min.js" type="text/javascript"></script>
  <script src="js/external/fastclick.js" type="text/javascript"></script>
  <!--<script src="js/external/jquery.parallax-scroll.js"></script>
            <script src="js/external/jquery.pagepiling.min.js"></script>
            <script src="js/external/jquery.smooth-scroll.js"></script>-->
  <script src="js/external/foundation.js" type="text/javascript"></script>
  <script src="js/external/foundation.topbar.js" type="text/javascript"></script>
  <script src="js/app.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>

</html>

【问题讨论】：

制作一个小提琴或向我们展示您的项目结构 - 这可能是因为外部资源的路径不正确。

标签： jquery html css navigation zurb-foundation

【解决方案1】：

刚刚发现它不起作用，因为我没有在 Foundation 和 Normalize CSS 的链接上指定“rel='stylesheet'”和“type='text/css'”。

【讨论】：