Forum PHP.pl > [inne][jquery] Zmiana kolorów na stronie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [inne][jquery] Zmiana kolorów na stronie

Impact

31.10.2019, 13:26:20

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:

[HTML] pobierz, plaintext 
<body>
<div class="contrast">
 
 
	<span class="spcz">Kontrast:</span>
		<button class="button bialy"><i class="fa fa-sun"></i></button>
		<button class="button nocny"><i class="fa fa-moon"></i></button>
		<button class="button kontrast"><i class="fa fa-eye"></i></button>
		<button class="button kontrast_c_z"><i class="fa fa-eye"></i></button>
		<button class="button kontrast_z_c"><i class="fa fa-eye"></i></button>
 
</div>
 
<div class="toChange">
<center>	
 
 
<div class="col-2">
   <div>
    <ul class="menu2">
      <li><a class="menu" href="index.php?page=1"><i class="fas fa-caret-right"></i> STRONA 1</a></li>
      <li><a class="menu" href="index.php?page=2"><i class="fas fa-caret-right"></i> STRONA 2</a></li>       
    </ul>
</div>
<?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;
     }
 
?>
 
</div>
</center>
 
</body>
[HTML] pobierz, plaintext

plik js

[HTML] pobierz, plaintext 
$(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' });
  });
});
[HTML] pobierz, plaintext

olszam

31.10.2019, 13:49:25

W ciastku zapisz sobie co ma na wstępie ładować do strony.

Impact

31.10.2019, 14:22:56

mozesz dac jakis przyklad ?

viking

31.10.2019, 15:07:21

https://developer.mozilla.org/pl/docs/Web/A...ow/localStorage

Impact

4.11.2019, 08:49:53

Dla potomnych... Działa ale pewne można jakoś zrobić prościej...

[HTML] pobierz, plaintext 
$(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);
 
  });
});
 
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.