在調整窗口大小時刪除特定的類

我想在調整Web瀏覽器大小時從一個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(""); 
    } 
});

雖然這似乎不工作？

來源

2016-09-29 miotk

刪除'，'，resize' – Satpal

你不應該使用'$（window）.width（）'檢查wiewport寬度，參見更好的選擇：https：//developer.mozilla.org/en/docs/Web/API/Window/matchMedia –

刪除事件名稱之間的逗號（,） - 它們只能用空格分隔。

另請注意，您不需要使用addClass('')，因爲您的函數名稱是一個匿名函數，所以您可以使用toggleClass()來簡化邏輯，並且還可以在調整窗口大小時自動添加/刪除類倍。試試這個：

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

Working example

調整底部右側窗格中上面的例子中看到代碼工作。

來源

2016-09-29 10:35:43

曾經打敗過你 – Satpal

這仍然沒有'看來工作，網頁仍然顯示好像班級仍然在那裏。「.tab-pane」是選擇的正確類嗎？ – miotk

@miotk這應該工作絕對好。 '.tab-pane'選擇器是正確的。 –

我認爲這是正確的在這裏檢查

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

運行它，並從`負載調整它在另一個窗口

來源

2016-09-29 10:39:22

在調整窗口大小時刪除特定的類

回答

相關問題