Отлично работает в jsfiddle, но не на живом сайте.Зачем?

Question

Тестовая страница веб-сайта: http://www.lantiis.com/indexold.html

jsFiddle: http://jsfiddle.net/Guhb4/7/

Я получил помощь по jQuery, и он отлично работает в jsFiddle.(временная регистрация как Lantiis здесь: Может независимо показывать / скрывать. Как скрыть при отображении? )

Когда я передавал код, все работало, кроме изображений.Отображаются фоновые изображения, изображения ссылок, но не основные изображения с содержимым сайта, для чего мне нужен был jquery.Я понятия не имею, что я сделал не так, когда передал код.

Я уверен, что это просто глупая ошибка с моей стороны, но, поскольку я все еще учу js, я в полной растерянности в этомточка.Я думал, что у меня все хорошо, пока не опубликовал свой первый вопрос и не увидел, насколько грязен мой код по сравнению с кодом пользователя, который мне помог.

Любые указания и критика приветствуются.

Answer 1

Вам необходимо включить библиотеку jQuery в ваш HTML.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

http://docs.jquery.com/Downloading_jQuery

И оберните ваш код jQuery следующим образом:

<script type="text/javascript">
    $(document).ready(function() {
        //Your code here
    });
</script>

http://docs.jquery.com/How_jQuery_Works#Launching_Code_on_Document_Ready

Answer 2

В дополнение к включению библиотеки jQuery (как упомянуто Callum) и помещению вашего кода в функцию загрузки (как упомянуто CleverQuack), ваш сценарий также должен иметь тип text / javascript, а не только javascript.Примерно так должно работать:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() { 
 $('#mask > div:first-child').show();
 $('#top a').click(function() {
    var keyterm = $(this).attr('title');
    $('#mask > div').hide();
    $('div[id=' + keyterm + ']').slideDown('slow');
 });
});
</script>