Question

我和朋友正在网站上工作，我们无法弄清楚如何让JSFiddle在网页上工作。

问题是，代码正在使用JSFiddle，它正在无缝地工作。但是，当我们在页面上传相同的内容时，我们看不到任何操作。下面，您可以找到我们的小提琴和我们的页面。

此事让我们感到疯狂，我们不确定我们缺少什么。小提琴链接：https://jsfiddle.net/n53qg/177/ 小提琴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>

小提琴JS：

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

小提琴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。您有两个选择：

将script标记放在所有内容之后（body的最后）

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

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

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

如何让Jsfiddles在网站上工作？

1 个答案: