JQuery скрипт не работает

-1

По какой-то причине мой код, который я запускаю прямо сейчас, не работает. У меня есть меню с левой стороны, и это должно быть, когда кто-то нажимает на него, он останется активным в этом меню. Однако он не работает.JQuery скрипт не работает

<head> 
    <link rel="stylesheet" href="Style/style.css" type="text/css"/> 
<script type="text/javascript" src="http://github.com/jashkenas/coffee-script/raw/master/extras/coffee-script.js"></script> 
<script> 
(function() { 
    $('ul.menu li').click(function() { 
     $('ul.menu li').removeClass('active'); 
     return $(this).addClass('active'); 
    }); 
}.call(this)); 
</script> 

</head> 
<body> 
...... 
    <ul class="menu"> 
     <li><i class="fa fa-home"></i>Dashboard</li> 
     <li><i class="fa fa-envelope"></i>Messages</li> 
     <li><i class="fa fa-user"></i>Profile</li> 
     <li class="active"><i class="fa fa-group"></i>Friends</li> 
     <li><i class="fa fa-cog"></i>Settings</li> 
    </ul> 
    </nav> 
.....

Может кто-нибудь знать, почему это так? Спасибо

источник

2016-02-01 TroubleEagle

'вернуть $ (это). addClass ('active'); 'не имеет смысла. Почему вы возвращаете объект jQuery? – epascarello

Вы получаете ошибки javascript в своей консоли? Если бы вы могли опубликовать их? –

использовать 'document.ready' ... IIFE - это не одно и то же. Ваш код работает до того, как существуют элементы – charlietfl

Вместо использования .call(this), вы можете обернуть его внутри ready функции $(document) «s так:

$(function() { 
    $('ul.menu li').click(function() { 
     $('ul.menu li').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
});

И удалить return заявление , Кроме того, я не смог найти jQuery, добавленный на страницу. Просьба добавить JQuery, как это:

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

После замены ваш URL на основе GitHub, с URL RawGit «s, ваш окончательный код должен выглядеть следующим образом:

<head> 
    <link rel="stylesheet" href="Style/style.css" type="text/css"/> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script type="text/javascript" src="http://cdn.rawgit.com/jashkenas/coffee-script/master/extras/coffee-script.js"></script> 
    <script> 
    $(function() { 
     $('ul.menu li').click(function() { 
     $('ul.menu li').removeClass('active'); 
     $(this).addClass('active'); 
     }); 
    }); 
    </script> 

</head> 
<body> 
    ...... 
    <ul class="menu"> 
    <li><i class="fa fa-home"></i>Dashboard</li> 
    <li><i class="fa fa-envelope"></i>Messages</li> 
    <li><i class="fa fa-user"></i>Profile</li> 
    <li class="active"><i class="fa fa-group"></i>Friends</li> 
    <li><i class="fa fa-cog"></i>Settings</li> 
    </ul> 
    </nav> 
.....

источник

2016-02-01 00:16:20

Я согласен с этим сообщением, также скрипт кофе размещен на github, который не работает как CDN .. Операции необходимо будет загружать локально на свой сервер. Проверьте консоль браузера при просмотре JS непосредственно, чтобы увидеть тип документа mime ... Его попытка загрузить JS в виде HTML-файла ... – Mayhem

@Mayhem Проверьте обновление. –

Прекрасное спасибо и очень! Ur a boss xx – TroubleEagle

Вы пытаетесь добавить обработчик событий click к своим li элементам, когда они еще не находятся в DOM - ваша разметка html наступает позже.

Переместите свой скрипт непосредственно перед закрытием </body> тег. Кроме того, я бы сократить это просто:

$('ul.menu li').click(function() { 
    $('ul.menu li').removeClass('active'); 
    $(this).addClass('active'); 
});

Кстати - вы включаете JQuery LIB где-нибудь на вашей странице? Если нет, скрипт тоже не работает. Включить JQuery LIB где-то в разделе на странице head:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>

источник

2016-02-01 00:14:24

Также отлично :) спасибо – TroubleEagle

Похоже, страница отказывается выполнить скрипт с URL-адреса github. Я запускал ваш код локально и имел проблемы с тем, чтобы браузер использовал URL-адрес, который вы предоставили. Вы можете использовать Google, CDN,

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

Или это выглядит как есть другой StackOverflow сообщение о получении GitHub репо рабочих, Link and execute external JavaScript file hosted on GitHub

Гудлак

источник

2016-02-01 00:25:11

JQuery скрипт не работает

ответ

Смежные вопросы