Question

我差点就到了，创建了一个按钮，用一个按钮改变我页面的CSS，改变主题＆＃34;。我希望用户能够在2＆＃39;主题之间来回切换。目前，按钮工作一次并更改主题但我无法更改回来。我尝试过使用.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');
      });
   });

Answer 1

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

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

$('#themeButton').click(function(){
    $(body).toggleClass('otherTheme');
});

JQuery改变主题

1 个答案: