Witam, mam problem z kodem. Chodzi mi o zmianę kolorów strony i ich elementów po przyciśnięciu przycisku. Ogólnie zmiana działa do jednej strony ale jak np wciskam menu to kolor znika a chciałbym żeby po naciskaniu menu kolor strony zostawał taki jak był wciskany przyciskami na górze strony. Nie znam za za bardzo (jquery/javascript) i nie wiem jak to ugryźć.
kod html:
<http://december.com/html/4/element/body.html> <http://december.com/html/4/element/div.html class="contrast"> <http://december.com/html/4/element/span.html class="spcz">Kontrast:</http://december.com/html/4/element/span.html> <http://december.com/html/4/element/button.html class="button bialy"><http://december.com/html/4/element/i.html class="fa fa-sun"></http://december.com/html/4/element/i.html></http://december.com/html/4/element/button.html> <http://december.com/html/4/element/button.html class="button nocny"><http://december.com/html/4/element/i.html class="fa fa-moon"></http://december.com/html/4/element/i.html></http://december.com/html/4/element/button.html> <http://december.com/html/4/element/button.html class="button kontrast"><http://december.com/html/4/element/i.html class="fa fa-eye"></http://december.com/html/4/element/i.html></http://december.com/html/4/element/button.html> <http://december.com/html/4/element/button.html class="button kontrast_c_z"><http://december.com/html/4/element/i.html class="fa fa-eye"></http://december.com/html/4/element/i.html></http://december.com/html/4/element/button.html> <http://december.com/html/4/element/button.html class="button kontrast_z_c"><http://december.com/html/4/element/i.html class="fa fa-eye"></http://december.com/html/4/element/i.html></http://december.com/html/4/element/button.html> </http://december.com/html/4/element/div.html> <http://december.com/html/4/element/div.html class="toChange"> <http://december.com/html/4/element/center.html> <http://december.com/html/4/element/div.html class="col-2"> <http://december.com/html/4/element/div.html> <http://december.com/html/4/element/ul.html class="menu2"> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html class="menu" href="index.php?page=1"><http://december.com/html/4/element/i.html class="fas fa-caret-right"></http://december.com/html/4/element/i.html> STRONA 1</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html class="menu" href="index.php?page=2"><http://december.com/html/4/element/i.html class="fas fa-caret-right"></http://december.com/html/4/element/i.html> STRONA 2</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> </http://december.com/html/4/element/ul.html> </http://december.com/html/4/element/div.html> <?php $strona = isset($_GET['page']) ? $_GET['page'] : ''; switch($strona) { case '1': include('1.php'); // strona 1 break; case '2': include('2.php'); // strona 2 break; default: include('1.php'); break; } ?> </http://december.com/html/4/element/div.html> </http://december.com/html/4/element/center.html> </http://december.com/html/4/element/body.html>
$(document).ready(function(){ $('.nocny').on('click', function() { $('.toChange').css({background : '#CCCCCC', color: 'black' }); $('.tytul_2').css({background : '#CCCCCC', color: 'black' }); $('.paragraf_2').css({background : '#CCCCCC', color: 'black' }); }); $('.bialy').on('click', function() { $('.toChange').css({background : '#FFFFFF', color: 'black' }); $('.tytul_2').css({background : '#FFFFFF', color: 'black' }); $('.paragraf_2').css({background : '#FFFFFF', color: 'black' }); }); $('.kontrast').on('click', function() { $('.toChange').css({background : '#000000', color: 'white' }); $('.tytul_2').css({background : '#000000', color: 'white' }); $('.paragraf_2').css({background : '#000000', color: 'white' }); }); $('.kontrast_c_z').on('click', function() { $('.toChange').css({background : '#000000', color: 'yellow' }); $('.tytul_2').css({background : '#000000', color: 'yellow' }); $('.paragraf_2').css({background : '#000000', color: 'yellow' }); }); $('.kontrast_z_c').on('click', function() { $('.toChange').css({background : 'yellow', color: '#000000' }); $('.tytul_2').css({background : 'yellow', color: '#000000' }); $('.paragraf_2').css({background : 'yellow', color: '#000000' }); }); });
W ciastku zapisz sobie co ma na wstępie ładować do strony.
mozesz dac jakis przyklad ?
https://developer.mozilla.org/pl/docs/Web/API/Window/localStorage
Dla potomnych... Działa ale pewne można jakoś zrobić prościej...
$(document).ready(function(){ if (typeof (localStorage) == 'undefined') { alert('Twoja przeglądarka nie obsługuje localStorage. Spróbuj zaktualizować...'); } else { if ((localStorage.getItem("background") != null) && (localStorage.getItem("color") != null)) { getColour = localStorage.background; $('.toChange').css('background', getColour); getFontColor = localStorage.color; $('.toChange').css('color', getFontColor); } } $('.nocny').on('click', function() { setColour = '#CCCCCC'; setFontColor = '#000000'; if ((setColour == "") && (setFontColor == "")) { alert(''); return; } localStorage.removeItem('background'); $('.toChange').css('background', setColour); localStorage.setItem("background", setColour); localStorage.removeItem('color'); $('.toChange').css('color', setFontColor); localStorage.setItem("color", setFontColor); }); });
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)