Javascript元素崩溃不起作用

这是我的问题。我有你在下面看到的代码。为什么它在这里不起作用：http://jsfiddle.net/e6kaV/33/？
有是证明我的错误：
{
“消息”： “未捕获的ReferenceError：$没有定义”，
“文件名”： “http://stacksnippets.net/js”，
“LINENO”：54，
“colno”：13
}
每个帮助的赞赏，因为我不知道JS或jQuery如何工作。在使用它之前Javascript元素崩溃不起作用

.pane-launcher{ 
 
    position:absolute; 
 
    top: 0; 
 
    width:80px; 
 
    height:80px; 
 
    display:block; 
 
} 
 
#rules { 
 
    left:0px; 
 
} 
 
#scenarios { 
 
    left:90px; 
 
} 
 
.pane{ 
 
    position:absolute;  
 
    left: 0; 
 
    height:50px; 
 
    display:none; 
 
    opacity:1; 
 
} 
 
#rules-pane { 
 
    top:80px; 
 
    width:170px; 
 
    background-color:yellow; 
 
} 
 

 
#scenarios-pane { 
 
    top:80px; 
 
    width:170px; 
 
    background-color:blue; 
 
}

<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <title>TEST</title> 
 
     <link rel="stylesheet" href="css.css"> 
 
    </head> 
 
    <body> 
 
     <div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div> 
 
     <div id="rules-pane" class="pane">Model1</div> 
 
     <div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div> 
 
     <div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div> 
 

 
     <script> 
 
      $(".pane-launcher").click(function() { 
 
\t // Set the effect type 
 
    var effect = 'slide'; 
 
    
 
    // Set the options for the effect type chosen 
 
    var options = { direction: 'up' }; 
 
    
 
    // Set the duration (default: 400 milliseconds) 
 
    var duration = 700; 
 
    $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active'); 
 
});</script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </body> 
 
</html>

来源

2016-07-27 Lukáš Jirůšek

你在哪里把Jquery的？你的jQuery没有被加载，因此在被调用时$是未定义的。将jquery引用链接放在body关闭标记之前。 –

@damianocelent是不是：你的意思是？我认为这是jQuery，我已经在那里。 –

是的，那你在你的html放置它的地方？把它放在之前，我只是意识到这是一个jsfiddle，试过了，我没有得到相同的错误。 –

负荷的jQuery：

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>TEST</title> 
     <link rel="stylesheet" href="css.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    </head> 
    <body> 
     <div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div> 
     <div id="rules-pane" class="pane">Model1</div> 
     <div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div> 
     <div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div> 

    <script> 
    $(".pane-launcher").click(function() { 
     // Set the effect type 
     var effect = 'slide'; 

     // Set the options for the effect type chosen 
     var options = { direction: 'up' }; 

     // Set the duration (default: 400 milliseconds) 
     var duration = 700; 
     $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active'); 
    }); 
    </script> 
    </body> 
</html>

我把它放在<head>，但你可以把它放在任何地方，只要它使用$的代码之前的（ $是jQuery）。

来源

2016-07-27 20:24:44 sebnukem

你应该添加jQuery才能使用它。这是一个工作示例。我刚刚从底部删除了jquery的脚本标记，并将其放置在其他脚本之前。

这里是笔http://codepen.io/anon/pen/xOzjWg

$(".pane-launcher").click(function() { 
 
\t // Set the effect type 
 
    var effect = 'slide'; 
 
    
 
    // Set the options for the effect type chosen 
 
    var options = { direction: 'up' }; 
 
    
 
    // Set the duration (default: 400 milliseconds) 
 
    var duration = 700; 
 
    $('.pane.active, #'+this.id+'-pane').toggle(effect, options, duration).toggleClass('active'); 
 
});

.pane-launcher{ 
 
     position:absolute; 
 
     top: 0; 
 
     width:80px; 
 
     height:80px; 
 
     display:block; 
 
    } 
 
    #rules { 
 
     left:0px; 
 
    } 
 
    #scenarios { 
 
     left:90px; 
 
    } 
 
    .pane{ 
 
     position:absolute;  
 
     left: 0; 
 
     height:50px; 
 
     display:none; 
 
     opacity:1; 
 
    } 
 
    #rules-pane { 
 
     top:80px; 
 
     width:170px; 
 
     background-color:yellow; 
 
    } 
 

 
    #scenarios-pane { 
 
     top:80px; 
 
     width:170px; 
 
     background-color:blue; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<div id="rules" class="pane-launcher"><img src="http://placehold.it/80x80"></div> 
 
<div id="rules-pane" class="pane">Model1</div> 
 
<div id="scenarios" class="pane-launcher"><img src="http://placehold.it/80x80"></div> 
 
<div id="scenarios-pane" class="pane">Model2<br><img src="http://placehold.it/170x20"></div>

来源

2016-07-27 20:27:26 Zain

同样的问题，现在我可以显示这些彩色框，但我不能隐藏它们。：/动画不工作，以及：/ –

包括jquery ui，它的失踪 – Zain

感谢您的帮助，已经得到它的工作，特别感谢您的意见。 –

感谢您的帮助大家，得到它的工作后，我包括这3个脚本链接（这是在提出相关问题的答案）。

 <script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
 
     <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

来源

2016-07-27 21:11:19

Javascript元素崩溃不起作用

回答

相关问题