-1

我和朋友正在一个网站上工作，我们不知道如何让 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

4

1 回答 1

3

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

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

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

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

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

于 2016-02-26T13:54:40.650 回答