Удаление определенного класса при изменении размера окна

Question

Я пытаюсь удалить класс из div при изменении размера веб-браузера. Например, на мобильном устройстве.

линия, которую я пытаюсь аффект

<div class="tab-pane active" id="visitors"> 

Я пытаюсь удалить active класс. Я в настоящее время пробовал:

$(window).on('load, resize', function mobileViewUpdate() { 
    var viewportWidth = $(window).width(); 
    if (viewportWidth < 600) { 
     $(".tab-pane").removeClass("active").addClass(""); 
    } 
}); 

Это, похоже, не работает?

Answer 1

Удалите запятую (,) между именами событий - они должны быть разделены пробелом.

отметить также, что нет необходимости использовать addClass(''), ваше имя функции является излишним, поскольку это анонимная функция, и вы можете использовать toggleClass() упростить логику, а также сделать класс автоматически добавлять/удалять, если при изменении размера окна мультипликатора раз. Попробуйте это:

$(window).on('load resize', function() { 
    $(".tab-pane").toggleClass("active", $(window).width() >= 600); 
}); 

Working example

Изменение размера нижней правой части окна в приведенном выше примере, чтобы увидеть код работает.

Answer 2

Я думаю, что это правильно проверить здесь

$(window).on('load resize', function() { 
 
    var viewportWidth = $(window).width(); 
 
    if (viewportWidth < 600) { 
 
     $(".tab-pane").removeClass("active"); 
 
    } else { 
 
     $(".tab-pane").addClass("active"); 
 
    } 
 
});

.active { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab-pane active">a</div> 
 
<div class="tab-pane active">a</div> 
 
<div class="tab-pane active">a</div> 
 
<div class="tab-pane active">a</div> 
 
<div class="tab-pane active">a</div>

запустить его и изменить его на другом окне