無法利用jsfiddle工作

Question

我是jsfiddle的新手。我試圖利用從的jsfiddle功能：http://jsfiddle.net/jhfrench/NQ97h/

的JS一塊是這樣的：

$('#myTab a').click(function (e) { 
    if($(this).parent('li').hasClass('active')){ 
    $($(this).attr('href')).hide(); 
    } 
    else { 
    e.preventDefault(); 
    $(this).tab('show'); 
    } 
}); 

但是，當我嘗試使用此爲普通的HTML文件夾，只有我的HTML東西的作品。如果有人能夠展示如何轉換外部資源，正確的標籤之間的javascript，以及在jsfiddle中調用的onload事件進入正確的位置，那麼它肯定會有幫助！

謝謝！

Answer 1

除了通過user3558931和你想知道如何包括小提琴的外部資源，你在你的評論中提及給出的調整 - 以下內容添加到您的html包括包含有該js-和CSS-文件：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript" src="http://appliedinter.net/Workstream/common_files/js/plugins.js"></script> 
<script type="text/javascript" src="http://appliedinter.net/Workstream/common_files/js/script.js"></script> 
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> 
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css"/> 

以防萬一這是不明確 - 如果你在HTML這也有被包裹在腳本標記的調整JS代碼：

<script type="text/javascript> 
    // add code from answer by user3558931 here 
    // (which I just upvoted as OP hasn't enough rep to upvote) 
</script> 

更新評論：儘管可以像提及的YouTube視頻中的建議那樣獲取源代碼，但只需添加：在左側的小提琴菜單中單擊「外部資源」，即可顯示包含的外部文件。右鍵單擊每個文件，選擇「複製鏈接目標」，並將文件包含爲js或css。與包含的jquery版本類似。

Answer 2

你錯過了DOM準備好了。在jsfiddle中它工作，因爲代碼在window.load事件。使用DOM內容如下：

//Wait for DOM to load, then run the code enclosed. 
$(function() { 
    $('#myTab a').click(function (e) { 
     if($(this).parent('li').hasClass('active')){ 
      $($(this).attr('href')).hide(); 
     } 
     else { 
      e.preventDefault(); 
      $(this).tab('show'); 
     } 
    }); 
});