Как заставить Jsfiddles работать на сайте?

Question

Я и мой друг работаем над сайтом, и мы не могли понять, как заставить JSFiddle работать над веб-страницей.

Проблема в том, что код работает на JSFiddle, он работает без проблем. Однако, когда мы загружаем то же самое на нашу страницу, мы не видим никаких действий. Ниже вы можете найти нашу скрипку и нашу страницу.

Эта вещь сводит нас с ума в данный момент, мы не уверены, чего нам не хватает. Ссылка Fiddle: 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>

Fiddle 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 выполняется до загрузки остальной части страницы. У вас есть 2 варианта:

1. Положить ваши script теги после всего содержимого (в конце body)

2. Оберните ваш код в функцию DOM ready:

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

По умолчанию код JSFiddle загружается после того, как DOM был обработан, поэтому причина его работы там, а не на вашем сайте.