ウィンドウのサイズが変更されたときに特定のクラスを削除する

Question

Webブラウザのサイズを変更すると、divからクラスを削除しようとしています。

私が影響を与えるためにしようとしている行は、私はactiveクラスを削除しようとしています

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

です。私は現在、これを試みました：

$(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>

それはここで右のチェックだと思いますし、別のウィンドウに負荷 `から