Javascript-Jquery链接不工作_Javascript_Jquery_Jquery Ui

Javascript-Jquery链接不工作

javascript jquery jquery-ui

Javascript-Jquery链接不工作,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我正在尝试一个我发现的例子：但是由于代码运行得非常好，我可以假设我的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">&l

我正在尝试一个我发现的例子：

但是由于代码运行得非常好，我可以假设我的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>


var$accordion=$（“accordion”）；
$accordion.accordion（）；
$（“.opener”）。在（“单击”，函数（）{
变量$this=$（this），
toOpen=$this.data（“面板”）；
$accordion.accordion（“选项”，“活动”，打开）；
返回false；
});
第一节
莫里斯·莫里斯·安特、布兰迪·埃特、奥特莱斯a、苏西比特·埃特、夸姆。整数
乌特内克。胎膜早破，胎膜早破，妊娠期，调味品
阿梅特，努克。南阿尼布。Donec suscipit Peros。南美。普罗因·维韦拉·利奥
乌特奥迪奥。马勒苏阿达库拉比图尔酒店。前庭是一个圆滑的节杖
第二节
塞德·努尔纳。别着急。叶舌。前庭
普卢斯。Vivamus hendrerit，aliquet laoreet的dolor，mauris turpis porttitor
维利特，我要告诉你自由。不夸姆万岁。在suscipit
福西布斯乌纳
第三节
Nam enim risus，molestie et，porta ac，aliquam ac，risus。奎斯克·洛博蒂斯。
马萨的Phasellus Pellentsque purus。埃尼安在佩德。自由之旅
ac tellus pellentesque semper。塞德·ac·费利斯。塞德·康莫多，马格纳·奎斯·拉齐尼亚
奥纳雷，一杯水一杯水，一杯水

第一项
清单项目二
清单项目三

第四节
粗俗的格言。佩伦特式居住者morbi tristique Sentecus et netus et
malesuada是著名的ac turpis egestas。faucibus前同侧前庭
虎鲸和乌龟；埃尼安拉西尼亚毛里斯维尔酒店
东部标准时间
暂停欧盟nisl。自由女神。整型贵宾会议。
每一个康努比亚诺斯特拉，每一个
伊塞普托斯·希梅纳奥斯

提前感谢

您的代码必须在

文档中。准备就绪

试试这个

$(function () {

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

    $accordion.accordion();

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

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

        return false;
    });

});

您已将脚本包装在head中，这将导致

在

$（document）.ready（）中编写脚本
什么不对劲
尝试使用谷歌的链接
//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js
还有css
//在访问DOM元素之前，必须准备好ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jqueryui.css
这样做：
$(function () {
    var $accordion = $("#accordion");
    $accordion.accordion();
    $(".opener").on("click", function () {
        var $this = $(this),
        toOpen = $this.data("panel");
        $accordion.accordion("option", "active", toOpen);
        return false;
    });
});

还请注意：
$(function(){

});

是$（document）.ready（function（）{}）的简短表示法
问题出在哪里？什么部分没有按预期工作？也许你可以向提出问题的人解释为什么这样做有效。通过$（document）.ready（function（）{和您所做的其他更改与他们交谈。
$(function(){

});

$(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;
    });
});