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元素崩潰不起作用

回答

相關問題