Javascript - Jquery 链接不起作用

标签 javascript jquery jquery-ui

我正在尝试研究我发现的一个示例:http://jsfiddle.net/VZ3T5/1/

但是由于代码工作得很好,我可以假设我的 Jqueryui 1.9.2 链接不会...

这是我尝试的代码:

<html>
<head>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
<link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script>
var $accordion = $("#accordion");

$accordion.accordion();

$(".opener").on("click", function () {
var $this = $(this),
    toOpen = $this.data("panel");

$accordion.accordion("option", "active", toOpen);

return false;
});

</script>
</head>

<body>

 <a class="opener" data-panel="0" href="#">Open Section 1</a>

 <a class="opener" data-panel="1" href="#">Open Section 2</a>

 <a class="opener" data-panel="2" href="#">Open Section 3</a>

 <a class="opener" data-panel="3" href="#">Open Section 4</a>

 <div id="accordion">

 <h3>Section 1</h3>

<div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo
        ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
</div>

<h3>Section 2</h3>

<div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit
        faucibus urna.</p>
</div>

<h3>Section 3</h3>

<div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia
        ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
    <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
    </ul>
</div>

<h3>Section 4</h3>

<div>
    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et
        malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus
        orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel
        est.</p>
    <p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos.</p>
</div>
</div>
</body>
</html>

提前致谢

最佳答案

您的代码必须位于document.ready

试试这个

$(function () {

    var $accordion = $("#accordion");

    $accordion.accordion();

    $(".opener").on("click", function () {
        var $this = $(this),
            toOpen = $this.data("panel");

        $accordion.accordion("option", "active", toOpen);

        return false;
    });

});

关于Javascript - Jquery 链接不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22929476/

相关文章:

jquery - 在页面加载时隐藏 div

jquery - 如何自定义jquery slider 范围的颜色?

jquery 设置 url 提交

javascript - 使用 Promise 进行顺序加载

javascript - 使用 csv-parser 只返回文件头

jquery - 如何将逗号和括号分隔的列表字符串转换为另一个字符串?

javascript - jQuery 查找表行但忽略子表中的行

javascript - 为什么重新定义函数后函数变量仍然存在?

javascript - 一一循环ajax请求并一一显示结果?

javascript - jQuery UI 自动完成显示 AJAX 源的标签和值