如何让 Jsfiddles 在网站上工作？

Question

我和朋友正在网站上工作，但我们不知道如何获取 JSFiddle 开始在网页上工作。

问题是，代码在 JSFiddle 上运行，它运行无缝。但是，当我们在页面上上传相同的内容时，我们看不到任何操作。在下面，您可以找到我们的 fiddle 和我们的页面。

此刻这件事让我们发疯，我们不确定我们错过了什么。 Fiddle Link: https://jsfiddle.net/n53qg/177/ Fiddle HTML:

<div>
 <a class="link" href="#" data-rel="content1">Link 1</a>
 <a class="link" href="#" data-rel="content2">Link 2</a>
 <a class="link" href="#" data-rel="content3">Link 3</a>
 <a class="link" href="#" data-rel="content4">Link 4</a>
 <a class="link" href="#" data-rel="content5">Link 5</a>
 </div>
 <div class="content-container">
<div id="content1">This is the test content for part 1</div>
<div id="content2">This is the test content for part 2</div>
<div id="content3">This is the test content for part 3</div>
<div id="content4">This is the test content for part 4</div>
<div id="content5">This is the test content for part 5</div>
 </div>

Fiddle JS:

$(".link").click(function(e) {
  e.preventDefault();
  $('.content-container div').fadeOut('slow');
  $('#' + $(this).data('rel')).fadeIn('slow');
});

Fiddle CSS:

 .content-container {
position: relative;
width: 400px;
height: 400px;
 }
 .content-container div {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
 }

我们的页面：http://178.62.254.14/test/denemecik.html

Answer 1

问题是您的 script 在页面的其余部分加载之前被执行。您有 2 个选择：

将您的 script 标签放在所有内容之后（在 body 的末尾）

将代码包装在 DOM 就绪函数中：

$(document).ready(function() {
    //your code in here
});

默认情况下，JSFiddle 代码在 DOM 处理后加载，因此它在此处而不是您的网站上工作的原因。

如何让 Jsfiddles 在网站上工作？

How to get Jsfiddles working on a website?

html

javascript

css

jquery

fiddle