Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [inne][jquery] Zmiana kolorów na stronie
Impact
post 31.10.2019, 13:26:20
Post #1





Grupa: Zarejestrowani
Postów: 48
Pomógł: 0
Dołączył: 11.02.2008

Ostrzeżenie: (0%)
-----

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 
  1. <body>
  2. <div class="contrast">
  3.  
  4.  
  5. 	<span class="spcz">Kontrast:</span>
  6. 		<button class="button bialy"><i class="fa fa-sun"></i></button>
  7. 		<button class="button nocny"><i class="fa fa-moon"></i></button>
  8. 		<button class="button kontrast"><i class="fa fa-eye"></i></button>
  9. 		<button class="button kontrast_c_z"><i class="fa fa-eye"></i></button>
  10. 		<button class="button kontrast_z_c"><i class="fa fa-eye"></i></button>
  11.  
  12. </div>
  13.  
  14. <div class="toChange">
  15. <center>	
  16.  
  17.  
  18. <div class="col-2">
  19.    <div>
  20.     <ul class="menu2">
  21.       <li><a class="menu" href="index.php?page=1"><i class="fas fa-caret-right"></i> STRONA 1</a></li>
  22.       <li><a class="menu" href="index.php?page=2"><i class="fas fa-caret-right"></i> STRONA 2</a></li>       
  23.     </ul>
  24. </div>
  25. <?php 
  26.  
  27.  $strona = isset($_GET['page']) ? $_GET['page'] : '';
  28.      switch($strona) {
  29.  
  30.      case '1':
  31.      include('1.php'); // strona 1
  32.      break;
  33.  
  34.      case '2':
  35.      include('2.php'); // strona 2
  36.      break;
  37.  
  38.  
  39.      default:
  40.      include('1.php');
  41.      break;
  42.      }
  43.  
  44. ?>
  45.  
  46. </div>
  47. </center>
  48.  
  49. </body>
[HTML] pobierz, plaintext


plik js
[HTML] pobierz, plaintext 
  1. $(document).ready(function(){
  2.   $('.nocny').on('click', function() {
  3.  
  4.      $('.toChange').css({background : '#CCCCCC', color: 'black' });
  5.      $('.tytul_2').css({background : '#CCCCCC', color: 'black' });
  6.      $('.paragraf_2').css({background : '#CCCCCC', color: 'black' });
  7.   });
  8.  
  9.   $('.bialy').on('click', function() {
  10.  
  11.      $('.toChange').css({background : '#FFFFFF', color: 'black' });
  12.      $('.tytul_2').css({background : '#FFFFFF', color: 'black' });
  13.      $('.paragraf_2').css({background : '#FFFFFF', color: 'black' });
  14.   });
  15.  
  16.   $('.kontrast').on('click', function() {
  17.  
  18.      $('.toChange').css({background : '#000000', color: 'white' });
  19.      $('.tytul_2').css({background : '#000000', color: 'white' });
  20.      $('.paragraf_2').css({background : '#000000', color: 'white' });
  21.   });
  22.  
  23.   $('.kontrast_c_z').on('click', function() {
  24.  
  25.      $('.toChange').css({background : '#000000', color: 'yellow' });
  26.      $('.tytul_2').css({background : '#000000', color: 'yellow' });
  27.      $('.paragraf_2').css({background : '#000000', color: 'yellow' });
  28.   });
  29.  
  30.   $('.kontrast_z_c').on('click', function() {
  31.  
  32.      $('.toChange').css({background : 'yellow', color: '#000000' });
  33.      $('.tytul_2').css({background : 'yellow', color: '#000000' });
  34.      $('.paragraf_2').css({background : 'yellow', color: '#000000' });
  35.   });
  36. });
[HTML] pobierz, plaintext

Go to the top of the page
+Quote Post
olszam
post 31.10.2019, 13:49:25
Post #2





Grupa: Zarejestrowani
Postów: 342
Pomógł: 23
Dołączył: 20.01.2011
Skąd: Chełm

Ostrzeżenie: (0%)
-----

W ciastku zapisz sobie co ma na wstępie ładować do strony.
Go to the top of the page
+Quote Post
Impact
post 31.10.2019, 14:22:56
Post #3





Grupa: Zarejestrowani
Postów: 48
Pomógł: 0
Dołączył: 11.02.2008

Ostrzeżenie: (0%)
-----

mozesz dac jakis przyklad ?
Go to the top of the page
+Quote Post
viking
post 31.10.2019, 15:07:21
Post #4





Grupa: Zarejestrowani
Postów: 6 365
Pomógł: 1114
Dołączył: 30.08.2006

Ostrzeżenie: (0%)
-----

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


--------------------
Odpowiedzi na często zadawane pytania:
Konfiguracja serwera Apache + PHP 7 pod Windows | Kodowanie znaków na stronach www | PHPTAL w Zend Framework | Programowanie obiektowe w PHP | PDO uniwersalnym sposobem na obsługę baz danych | Kurs PHP (część 1): Podstawowy opis języka
Go to the top of the page
+Quote Post
Impact
post 4.11.2019, 08:49:53
Post #5





Grupa: Zarejestrowani
Postów: 48
Pomógł: 0
Dołączył: 11.02.2008

Ostrzeżenie: (0%)
-----

Dla potomnych... Działa ale pewne można jakoś zrobić prościej... 
[HTML] pobierz, plaintext 
  1. $(document).ready(function(){
  2.  
  3. if (typeof (localStorage) == 'undefined') {
  4.     alert('Twoja przeglądarka nie obsługuje localStorage. Spróbuj zaktualizować...');
  5. } else {
  6.     if ((localStorage.getItem("background") != null) && (localStorage.getItem("color") != null)) {
  7.         getColour = localStorage.background;
  8.         $('.toChange').css('background', getColour);
  9.         getFontColor = localStorage.color;
  10.         $('.toChange').css('color', getFontColor);
  11.     }
  12.   }
  13.  
  14.   $('.nocny').on('click', function() {
  15.     setColour = '#CCCCCC';
  16.     setFontColor = '#000000';
  17.     if ((setColour == "") && (setFontColor == "")) {
  18.         alert('');
  19.         return;
  20.     }
  21.     localStorage.removeItem('background');
  22.     $('.toChange').css('background', setColour);
  23.     localStorage.setItem("background", setColour);
  24.  
  25.     localStorage.removeItem('color');
  26.     $('.toChange').css('color', setFontColor);
  27.     localStorage.setItem("color", setFontColor);
  28.  
  29.   });
  30. });
  31.  
[HTML] pobierz, plaintext


Ten post edytował Impact 4.11.2019, 10:31:39
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 23.04.2024 - 10:07
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn