Javascript 更改切换后主体的背景色和不透明度
我昨天发布了这个问题(),我想阻止用户同时打开两个开关。根据一些用户的建议,我得到了我正在寻找的结果,代码如下:Javascript 更改切换后主体的背景色和不透明度,javascript,jquery,html,background,document-body,Javascript,Jquery,Html,Background,Document Body,我昨天发布了这个问题(),我想阻止用户同时打开两个开关。根据一些用户的建议,我得到了我正在寻找的结果,代码如下: $(document).ready(function() { $('.toggle-1').click(function() { if ($('.toggle-2').hasClass('active')) { // remove toggle-2 active classes $('.toggle-2').removeClass('active'
$(document).ready(function() {
$('.toggle-1').click(function() {
if ($('.toggle-2').hasClass('active')) {
// remove toggle-2 active classes
$('.toggle-2').removeClass('active');
$('.toggle-2-content').removeClass('active');
}
$('.toggle-1').toggleClass('active');
$('.toggle-1-content').toggleClass('active');
});
$('.toggle-2').click(function() {
if ($('.toggle-1').hasClass('active')) {
// remove toggle-1 active classes
$('.toggle-1').removeClass('active');
$('.toggle-1-content').removeClass('active');
}
$('.toggle-2').toggleClass('active');
$('.toggle-2-content').toggleClass('active');
});
});
现在,我试图让用户无法在背景中滚动,在活动切换后设置不同的背景颜色和不透明度,但通过添加以下代码,我无法成功地做到这一点:
$('body').css({
overflow: 'hidden',
background-color: 'black',
opacity: '0.5'
});
我在上述代码中插入新代码的方式如下:
$(document).ready(function() {
$('.toggle-1').click(function() {
if ($('.toggle-2').hasClass('active')) {
// remove toggle-2 active classes
$('.toggle-2').removeClass('active');
$('.toggle-2-content').removeClass('active');
}
$('.toggle-1').toggleClass('active');
$('.toggle-1-content').toggleClass('active');
$('body').css({
overflow: 'hidden',
background-color: 'black',
opacity: '0.5'
});
});
$('.toggle-2').click(function() {
if ($('.toggle-1').hasClass('active')) {
// remove toggle-1 active classes
$('.toggle-1').removeClass('active');
$('.toggle-1-content').removeClass('active');
}
$('.toggle-2').toggleClass('active');
$('.toggle-2-content').toggleClass('active');
});
});
现在,开关甚至不工作。如果有人能告诉我我做错了什么,我将不胜感激
提前感谢您的帮助 这是因为背景色的破折号,js在变量中加破折号是无效的。(它将被解释为减法运算符) 试一试 或
这是因为背景色的破折号,js在变量中加破折号是无效的。(它将被解释为减法运算符) 试一试 或
$('body').css({
overflow: 'hidden',
'background-color': 'black',
opacity: '0.5'
});
$('body').css({
overflow: 'hidden',
backgroundColor: 'black', // this is valid in jQuery css function
opacity: '0.5'
});