Foundation5 选项卡 - 未捕获的错误类型？

Question

大家好，希望大家都好。

我在对我的站点执行 Foundation 5 选项卡时遇到了一些问题。我遇到了这个：http://foundation.zurb.com/forum/posts/856-foundation-5-tab-issues 并发现了类似的输出，只是我的不工作。

似乎有什么东西阻止了我的脚本。我试图将它移动到我的 header.php、footer.php 和 single.php 的不同部分，但没有成功。

输出图像可以在底部看到。

希望有人能帮我解决这个问题。

<?php /* single.php */ ?>

<?php get_header(); ?>

<body>



<section class="common-title-wrap">

    <div class="row"><h2><?php single_post_title(); ?></h2></div>    

</section>



<section class="common-section">

    <div class="single-column">
        <div class="side-nav">
             <?php

             $options = array(

             'sort_column' => 'menu_order',

             'menu' => 'Equipment Menu',

             'container' => false

             );

            wp_nav_menu($options); ?>


        </div>

        <div class="tab-column">
<ul class="tabs" data-tab role="tablist">
  <li class="tab-title active" role="presentation"><a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" aria-controls="panel2-1">Equipment</a></li>
  <li class="tab-title" role="presentation"><a href="#panel2-2" role="tab" tabindex="0" aria-selected="false" aria-controls="panel2-2">Equipment Rental</a></li>
  <li class="tab-title" role="presentation"><a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" aria-controls="panel2-3">Equipment Purchase</a></li>
  <li class="tab-title" role="presentation"><a href="#panel2-4" role="tab" tabindex="0" aria-selected="false" aria-controls="panel2-4">Video<a></li>
</ul>
<div class="tabs-content">
  <section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1">
    <p><?php echo the_field('equipment'); ?></p>
  </section>
  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-2">
    <p><?php echo the_field('equipment_rental'); ?></p>
  </section>
  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-3">
    <p><?php echo the_field('equipment_purchase'); ?></p>
  </section>
  <section role="tabpanel" aria-hidden="true" class="content" id="panel2-4">
    <p><?php echo the_field('equipment_video'); ?></p>
  </section>
        </div>  
    </div>

</div>


</section>

<?php get_footer(); ?>

<?php /* Template Name: Footer */ ?>

<footer>

       <div class="site-footer">

            <div class="copyright">

                <p>Copyright ©.  All Rights Reserved.</p>

            </div>

        </div>
</footer>


<?php wp_footer();?>

  <script src="/js/vendor/jquery.js"></script>
  <script src="/js/foundation.min.js"></script>

  <script src="/js/foundation/foundation.tab.js"></script>

    <script>
      $(function() {
        $( "#tabs" ).tabs();
      });
    </script>

    <script>
        $(document).foundation();
    </script>

</body>
</html>

Answer 1

您的脚本位置指向不正确。当您运行使用格式“/js/something.js”的脚本时，您是在告诉服务器转到根文件夹，找到 'js' 文件夹，然后运行您指定的文件。安装 WordPress 后，它位于 domain.com/js/something.js，not 位于 wordpress.com/wp-content/themes/theme-name/js/something.js 其中所有内容都通过.

引用

您需要做 3 件事中的 1 件事：

将您的 JS 文件移动到域的实际根目录中名为 'JS' 的文件夹中。我真的不推荐这个解决方案，因为你然后将你的 JS 从你的主题中分离出来并将文件添加到根目录，但这会很容易地解决你的问题。
使用内置的 WP 函数，如 get_template_directory()、get_stylesheet_directory() 和其他类似函数。有了这些，你可以让你的路径看起来像 <script src="<?php get_theme_directory(); ?>/js/vendor/jquery.js"></script> 并且它会指向正确的位置。查看 WP 文档并找到适合您情况的文档。
使用 wp_enqueue_scripts() 函数和特性加载您的脚本。这是执行此操作的最佳方法，也是您应该处理此问题的方法。这种方法的好处是 WP 会监视脚本，因此 none 会多次（不必要地）加载它们，并且它会确保满足脚本的依赖性（foundation.js 在 jquery.js 之后加载和任何插件 JS 等）。这是最困难的方法，但实际上并没有那么难，如果您要开发 WP 主题，您确实知道如何做到这一点。

祝你好运！

Foundation5 选项卡 - 未捕获的错误类型？

Foundation5 Tabs - Uncaught Error Type?

html

wordpress

tabs

zurb-foundation