在 Wordpress 中加载 Jquery UI 选项卡

Question

我正在努力让 jQuery UI 选项卡在 Wordpress 中运行。我有一个自定义布局，需要直接将它们添加到主页中。

我在这个页面上有几个脚本，除了 jQuery UI 选项卡外，所有脚本都在工作。在我本地机器上的常规 HTML 文档中一切正常，所以我知道这与 Wordpress 如何调用/读取脚本有关。

我使用 wp_enqueue_script 来加载 finctions.php 中的脚本。我可以通过源代码看到外部脚本正在页脚部分加载，但选项卡仍然不起作用。

我知道 jQuery 可以正常工作，因为我有几个其他脚本在页面上运行良好。

我的 Functions.php 代码：

function modify_jquery() {
if ( !is_admin() ) {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js', false, '1.8.1' );
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-ui-widget' );
    wp_enqueue_script( 'jquery-ui-tabs' );}
}
add_action( 'init', 'modify_jquery' );

再次，我可以看到这些脚本正在页面上加载，并且看起来顺序正确。

我在页脚下面的 wp_footer() 中添加了调用这个 javaScript。 为了便于阅读，我已经删除了其他不属于问题的函数：

<script language="javascript">
$.noConflict();
jQuery( document ).ready(function( $ ) {
    //jquery ui tabs
    $(function() {
    $(".tabs").tabs({
    show: function(event, ui) {}
    });
   });
    });
</script>

页面上的 HTML 是标准的标签内容：

<div class="tabs">
  <ul>
    <li><a href="#tabs1-1">About</a></li>
    <li><a href="#tabs1-2">Case Studies</a></li>
    <li><a href="#tabs1-3">Testimonials</a></li>
  </ul>
  <div id="tabs1-1">
    <article>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </article>
  </div>
  <div id="tabs1-2">
    <article>
      <p>Lorem ipsum dolor sit amet.</p>
    </article>
  </div>
  <div id="tabs1-3">
    <article>
        <p>more blah</p>
    </article>
  </div>
</div> 

同样，我将所有这些都放在一个标准的 HTML 文档中。

您可以在此处查看正在进行的网站： http://www.lucasdeaver.com/#portfolio

JavaScript 不是我的强项，因此我们将不胜感激。我已经阅读了其他几篇关于此的帖子，并尝试了我阅读和想到的所有内容。

Answer 1

Wordpress 已经有很多 UI 效果。 Docs

第一步，在主题的function.php文件中添加效果

function add_theme_scripts() {
    wp_enqueue_script("jquery-ui-tabs");
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

第 2 步。添加 HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab 1</p>
  </div>
  <div id="tabs-2">
    <p>Tab 2</p>
  </div>
  <div id="tabs-3">
    <p>Tab 3</p>
  </div>
</div>

第三步：在footer.php中添加脚本

<script>
jQuery(document).ready(function($) {
    $('#tabs').tabs();
})    
</script>