如何让Jsfiddles在网站上工作

How to get Jsfiddles working on a website?

本文关键字：网站 工作 Jsfiddles      更新时间：2023-09-26

我和朋友正在一个网站上工作，我们无法弄清楚如何让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

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

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

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

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

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

相关文章：