Question

美好的一天，我希望每个人都很好。

我在使用Foundation 5 Tabs到我的网站时遇到了一些麻烦。我过来了这个：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>

Output Screenshots

Answer 1

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

你需要做三件事之一：

将JS文件移动到名为“JS”的文件夹中的域的实际根目录。我并不真的推荐这个解决方案，因为您将JS与主题分开并将文件添加到根目录，但这可以轻松解决您的问题。
使用内置WP函数，如get_template_directory（），get_stylesheet_directory（）和其他类似函数。通过这些，您可以使路径看起来像selectedPlate.item.plate_type_id.name，它会指向正确的位置。查看WP文档并找到适合您情况的文档。
使用wp_enqueue_scripts（）函数和功能加载脚本。这是执行此操作的最佳方式，也是您应该处理此问题的方式。这种方法的好处是WP将监视脚本，因此它们都不会加载多次（不必要），并且它将确保满足脚本的依赖性（在jquery.js和任何插件JS之后加载foundation.js等）。这是最困难的方法，但是如果你要开发WP主题的话，那就不是那么难了你真的知道怎么做。

Foundation5标签 - 未捕获的错误类型？

1 个答案: