Question

我正在尝试将一个垂直菜单放入我的一个Wordpress页面中。我已经完全按照我的想法编写了它在JSFiddle中的工作和功能，但出于某种原因，当我将代码复制到Wordpress时，它不起作用。

我怎样才能让它发挥作用？我很沮丧。我现在已经研究了一个月了。

以下是JSFiddle的链接：http://jsfiddle.net/PEZman777/5pkcH/6/以及HTML代码的示例：

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div id="tabs">
<ul>
    <li class="aboutnav">
        <div align="right"><a href="#a">Company Overview</a></div>
    </li>
    <li class="aboutnav">
        <div align="right"><a href="#b">About Us</a></div>
    </li>
     <li class="aboutnav">
         <div align="right"><a href="#c">Contact Us</a></div>
    </li>
</ul>
<div id="a">
    Content of A
</div>
<div id="b">
    Content of B
</div>
<div id="c">
    Content of C
</div>
</div>

以下是我要将此菜单放在其中的页面的链接：http://www.cedarstreetcommercial.com/about-us/

Answer 1

这是一个典型的计时案例，有时也称为竞争条件＆＃34;。如果我在控制台中运行你的jQuery它工作正常。在呈现页面之前，您在文档的头部运行了标签初始化功能。将其移动到HTML正文的底部，或将其包装在document.ready函数中：

    ...

    <script>
    //shorthand for jQuery(document).ready() { and with an alias for $
    jQuery(function($) { 
        $('#tabs')
        .tabs()
        .addClass('ui-tabs-vertical ui-helper-clearfix');
    });
    </script>
</body>

垂直菜单/导航 - Wordpress / JSFiddle

1 个答案: