Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Добавление класса (https://javascript.ru/forum/jquery/21013-dobavlenie-klassa.html)

NeoMurderer 25.08.2011 16:18

Добавление класса
 
Скажите как при нажатии на пункт меню этому элементу присваивался класс active,а у других элементов он удалялся.Пытался сделать так не получается.
$("#menu li").removeClass("active");
$(this).addClass("active");

walik 25.08.2011 16:27

Так должно работать, покажите еще кода что бы выяснить ошибку

NeoMurderer 25.08.2011 16:38

Вот сайт,кликайте на меню http://svitok.pp.ua/

walik 25.08.2011 16:42

У меня все работает, при клике добавляется класс active, только потом страница перезагружается и класс соответственно убирается.

NeoMurderer 25.08.2011 16:43

Страница не перезагружается,подгружае ся контент через Jquery

bret 25.08.2011 17:15

- при отключенном js выкидывает на настройки АдСенс...
- возможно, после запроса перетирается this, пробуй предварительно сохранить её в переменной сразу после входа в обработчик

Black_Prince 25.08.2011 17:58

$.ajax({
    url: 'engine/ajax.php',
    data: ({link : link,}),
    type : "POST",
    success: function (data) {  
        $("#menu li").removeClass("active");
        $(".left").html(data).css("opacity","0").animate({opacity:'1'},1500);
    },
     error: function(){ 
         alert ("No PHP script: ");
      } 
   }); 
   $(this).addClass("active");
   return false;


Господа, никто не заметил, что классы удаляются в success для ajax, а назначается класс вне ajax функций?

Дело в том что выполняется асинхронный запрос. Т.е. обработчик кода доходит до функции ajax, запускает его в отдельном потоке и идет дальше. Т.о. сначала успевает отрабатывать назначение класса, а уже после приходит ответ от сервера, и по успеху - убираются классы.

Решение поставьте обе строки
$("#menu li").removeClass("active"); и $(this).addClass("active"); друг рядом с другом. например:

var elem = $(this);
$.ajax({
    url: 'engine/ajax.php',
    data: ({link : link,}),
    type : "POST",
    success: function (data) {  
        $("#menu li").removeClass("active");
        elem.addClass("active");
        $(".left").html(data).css("opacity","0").animate({opacity:'1'},1500);
    },
     error: function(){ 
         alert ("No PHP script: ");
      } 
   }); 
   return false;


и будет вам щастя :)

NeoMurderer 25.08.2011 20:30

Black_Prince,спасибо понял ошибку :victory:


Часовой пояс GMT +3, время: 05:17.