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

您已准备好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');
        }
    });
});

Answer 2

除了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视频中的建议那样获取源代码，但只想添加：点击＆＃34显示包含的外部文件;外部资源＆＃34;在左边的小提琴菜单中。右键单击每个文件，选择＆＃34;复制链接目标＆＃34;，并将文件包含为js或css。与包含的jquery-version类似。

不能利用工作的jsfiddle来工作

2 个答案: