Проблемы с добавлением jQuery в HTML

#jquery #html

#jquery #HTML

Вопрос:

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="EJS">
        <title>Website</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script>
            $(document).ready(function() {
                $('.html').click(function() {
                $('.html').fadeOut('fast');
                });
            });
        </script>
    </head>
    <body>
        <div id="content">
            <center>

                <nav class="navBar">
                    <a class="html" href="index.html">HTML</a> |
                    <a class="css" href="style.css">CSS</a> |
                    <a href="/js/">JavaScript</a> |
                    <a href="/jquery/">jQuery</a>
                </nav>

                <a href="http://hil.no/"><img id="hilPic" src="hil.png"></a></img>

            </center>
        </div>
    </body>
</html>

Это мой html-лист. Почему jQuery не работает, есть предложения?
Я попытался поместить jQuery в другой файл, а затем сослаться на него, но это все равно не сработает.

Что я делаю не так?

1. Где ссылка на jQuery библиотеку? Этого нет нигде в вашем коде.

2. вы не добавили библиотеку Jquery,..

3. ваше событие щелчка вызывает срабатывание ссылки.

4. Кроме того, узнайте, как использовать консоль браузера для обнаружения Javascript ошибок. F12 — ваш друг.

5. Сначала добавьте библиотеку jQuery <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Ответ №1:

У вас есть href="index.html" ссылка, поэтому всякий раз, когда вы нажимаете на нее, страница перенаправляется на нее index.html

Если вам нужно что-то сделать перед перенаправлением, приведенный ниже код должен помочь.

 $( ".html" ).click(function( event ) {
  event.preventDefault();
  // do your thing here.
});

Но сначала вы можете включить jquery в свой html-код над тегом script

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Ответ №2:

https://developers.google.com/speed/libraries/devguide#jquery

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Ответ №3:

Включить библиотеку jquery

 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

и ваш код будет

 $(document).ready(function() {
      $('.html').click(function(event) {
           event.preventDefault();
           $(this).fadeOut('fast');
        });
    });

Ответ №4:

Вы должны включить Jquery в свой <head> раздел следующим образом.

 <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/<your desired version>/jquery.min.js"></script>
</head>

Без загрузки библиотеки jQuery это не будет работать. Если вы хотите ссылаться на jquery из любого другого js файла, убедитесь, что вы включили библиотеку в этот js-файл.