单击标签后，使用Javascript更改正文CSS

Use Javascript to change body CSS upon clicking a label

本文关键字：正文 CSS Javascript 使用 标签 单击      更新时间：2023-09-26

我正在为一个朋友开发一个网站。我使用屏幕外的CSS菜单。调用菜单的按钮不是HTML按钮，它被列为输入和标签。

使用菜单时，您仍然可以在页面的主体上滚动。我想禁用它。我能看到这是怎么可能的唯一方法是在点击菜单标签时更改正文CSS，但我已经做了几个小时了，运气不好。我计划在打开菜单时将以下内容添加到身体类中：

overflow: hidden;
position: static;

这是我最近使用的javascript，但没有用。我试过一次加载，但HTML"onclick"然后运行一个切换body类的脚本是我最好的理论。

HTML

<input data-function='swipe' id='swipe' type='checkbox' value="button"/>
<label data-function='swipe' for='swipe' onclick='noScroll()' value="button">&#xf0c9;</label>

<div class='sidebar'>
    <nav class='menu'>
        <li><a href='#'>Home</a></li>
        <li class='active'><a href='#'>About</a></li>
        <li><a href='#'>Imprint</a></li>
        <li><a href='#'>Imprint</a></li>
    </nav>
</div>

Javascript

noScroll({
    $('#swipe').toggleClass('body bodynoscroll');
    })

CSS

.body {
    font: 12px/1 'Open Sans', sans-serif;
    color: $c;
    background: $c;
    overflow-x: hidden;
}
.bodynoscroll {
    font: 12px/1 'Open Sans', sans-serif;
    color: $c;
    background: $c;
    overflow-x: hidden;
    overflow: hidden!important;
    position: static!important;
}

网站

https://www.brotherhoodgaming.net

感谢您的帮助！我的javascript很糟糕，所以我正在学习。

给标签一个ID，将事件绑定到它

<label id="menubuttonlabel" data-function='swipe' for='swipe' onclick='noScroll()' value="button">&#xf0c9;</label>

然后你的JS代码会看起来像：

$(document).on('click', '#menubuttonlabel', function(){
    if ($('body').css('overflow') == 'auto'){
          $('body').css("overflow", "hidden");
          }else{
              $('body').css("overflow", "auto"); 
          }   
});

无需更改您的body css，只需启用或禁用鼠标滚轮，如果这正是您想要的？试试这个。。。从我的旧项目中复制粘贴。

<script>
function stopWheel(e){
    if(!e){ e = window.event; }
    if(e.preventDefault) { e.preventDefault(); }
    e.returnValue = false;
}
function mousewhellStat(stat){
    if (stat) {
        document.onmousewheel = null;
        if(document.addEventListener){
            document.removeEventListener('DOMMouseScroll', stopWheel, false);
        }   
    } else {
        document.onmousewheel = function(){ stopWheel(); }
        if(document.addEventListener){
            document.addEventListener('DOMMouseScroll', stopWheel, false);
        }   
    }
}
$("#menubuttonlabel").click(function(){
     mousewhellStat(false);
})
$(".sidebar .menu li").click(function(){
    mousewhellStat(true);
    $(".sidebar").slideUp(300);
})
</script>

只需复制粘贴到您的页面即可。看看是否工作良好：）

此代码应该可以工作：

$(document).ready(function(){
    $("#{your label id}").toggle(
        function(){$("body").css({"overflow": "hidden"});},
        function(){$("body").css({"overflow": "auto"});}
    );
});
相关文章：