0

我快到了，创建了一个按钮来更改我的页面的 CSS，并带有一个显示“更改主题”的按钮。我希望用户能够在 2 个“主题”之间来回切换。目前，该按钮可以工作一次并更改主题，但我无法将其更改回来。我尝试使用 .toggle 操作，但不能正确调用它，因为它只会使我的页面立即更改并取消按钮。建议在哪里添加？

    $(document).ready(function(){
      $('#themeButton').click(function(){
        $('#mcheader1').hide();
        $('#mcheader2').show();
        $('body').css('background-color', '#edd2fb');
        $('#focalimages').css('background-color','#540080');
        $('#focalimages').css('border-color', '#fce3f0');
        $('#container').css('border-color','#002aa7');
        $('#container').css('background-color','#fce3f0');
        $('#someID').css('border-color', '#002aa7');
        $('#someID').css('color', '#002aa7');
        $('ul').css('border-color', '#e70050');
      });
   });
4

1 回答 1

0

你不能像那样简单地撤消样式更改——这就是发明 CSS 的原因。就像 Rory 说的那样，在 body 上使用一个类（或其他一些共同的祖先元素），并用一行来切换它。

body.otherTheme #mcheader1 {display: none;}
body.otherTheme #mcheader2 {display: block;}
body.otherTheme {background-color: #edd2fb;}
... 

$('#themeButton').click(function(){
    $(body).toggleClass('otherTheme');
});
于 2013-11-01T17:55:55.430 回答