垂直菜单/导航 - WordPress/JSFiddle.

Vertical Menu/Navigation- Wordpress/JSFiddle

本文关键字：WordPress JSFiddle 导航 菜单 垂直      更新时间：2023-09-26

我正在尝试将垂直菜单放入我的一个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/

这是一个经典的计时案例，有时称为"竞争条件"。如果我在控制台中运行您的 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>
相关文章：