2013-11-01 55 views
0

我快到了,創建了一個按鈕,用於更改我的頁面的CSS,並顯示一個「更改主題」按鈕。我希望用戶能夠在2個「主題」之間來回切換。目前,該按鈕一次工作,並改變主題,但我無法讓它改回來。我嘗試過使用.toggle動作,但不能正確調用它,因爲它只是讓我的頁面立即更改並取消按鈕。哪裏可以添加它的建議?JQuery更改主題

$(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'); 
     }); 
    }); 
+0

哪裏在代碼中定義其他主題?我只能看到一個。 – melancia

+9

僅供參考一個更簡單的方法來實現這一點是把一個類放在可以在JS中切換的'body',並將該子類的CSS從該類中取消。 –

+0

您正在查找的['.toggle()'](http://api.jquery.com/toggle-event/)現在已被棄用,並已從jQuery –

回答

0

你不能簡單地撤消那樣的樣式變化 - 這就是爲什麼CSS被髮明的原因。像Rory說的那樣,在身體上使用一個類(或者其他一些常見的祖先元素),並用一行切換。

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

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