为什么不是't窗口.恢复正常工作吗?(javascript/jquery）

Why isn't window.onresize working? (javascript/jquery)

本文关键字：工作 jquery javascript 常工作 恢复 窗口 为什么不      更新时间：2023-09-26

我试图让这个网站在大屏幕上显示一个选项卡框，但在小屏幕上只是一个正常的布局。这是我的：

function adapt() {
if(document.documentElement.clientWidth > 800) {
    $(document).ready(function() {
        $(".box").hide();
        $(".box:first").show(); 
        $("ul.tabs li").click(function() {
            $("ul.tabs li").removeClass("active");
            $(this).addClass("active");
            $(".box").hide();
            var activeTab = $(this).attr("rel"); 
            $("#"+activeTab).show(); 
        });
    });
}else{
    $(document).ready(function () {
        $('.box').show();
    });
};}
window.onload = adapt();
window.onresize = adapt();

onload事件处理程序可以工作，因此只有在页面加载在较大屏幕上时，tab box jquery函数才能工作，并且在较小屏幕上加载时，它会显示所有内容。我添加了onresize事件，这样当浏览器窗口缩小时，它也会发生变化，但它不起作用。如果我在大屏幕上加载，然后缩小它，显示的只是第一个选项卡中的内容，如果我在小屏幕上加载并将窗口放大，则显示所有内容，选项卡按钮不起作用。我是不是误解了window.resize的工作原理？

我猜测，也许事件在第一次调整大小时只触发一次，如果差异不足以让我的另一个条件接管，那么它就不会发生。如果是这样的话，有没有一种方法可以让它不断检查屏幕大小，比如CSS媒体查询？

别忘了，如果项目中的其他代码也使用window.onresize或window.onload，您的代码将被覆盖

使用addEventListener函数是一种更好的做法

window.addEventListener('resize', adapt);

您需要调用引用，而不是执行函数

window.onload = adapt;
window.onresize = adapt;

因为当你做时

window.onload = adapt();
window.onresize = adapt();

您执行adapt（），由于它不返回任何内容，因此您对这些事件

没有任何操作

您可以尝试使用jquery:

$(document).ready(function() {
    adapt(); // onload
    $(window).resize(adapt()); // resize
});
相关文章：