在调整窗口大小时删除特定的类

我想在调整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

在调整窗口大小时删除特定的类

回答

相关问题