Jquery color problems

Jquery color problems
2018-01-09T14:20:42+01:00
2018-01-10T10:49:48+01:00
2022-08-10T22:50:31+02:00
Gabesz76
Sziasztok!
Azt szeretném elérni,hogy egy weboldalon be lehessen állítani bizonyos elemek színét, jelen esetben a body színét.
Ez még működik is de amint betöltöm a weboldal egy másik oldalát a szín visszaáll az eredetire ami a css-ben lett meghatározva.
Hogy tudnám elérni azt,hogy pl a főoldalon kiválasztott egyedi színek legyenek érvényesek a többi betöltött oldalra is?
Köszönöm előre is.. :)
<body>
<div class="red"></div>
<div class="pink"></div>
</body>
<style>
.red{
content:'';
position:relative;
top:0px;
left:0px;
height:20px;
width:20px;
background:#BC4C59;
cursor:pointer;
}
.pink{
content:'';
position:relative;
top:-20px;
left:20px;
height:20px;
width:20px;
background:#4C69BC;
cursor:pointer;
}
</style>
<script>
$(document).ready(function() {
$('.red').click(function(){
$('.main').css('background','#BC4C59');
});
$('.pink').click(function(){
$('.main').css('background','#4C69BC');
});
});
});
</script>
Mutasd a teljes hozzászólást!
Szia 

Phresh megoldása nagyjából :D 

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="bootstrap.css"> </head> <body class="main"> <div class="red"></div> <div class="pink"></div> </body> <style> .red{ content:''; position:relative; top:0px; left:0px; height:20px; width:20px; background:#BC4C59; cursor:pointer; } .pink{ content:''; position:relative; top:-20px; left:20px; height:20px; width:20px; background:#4C69BC; cursor:pointer; } </style> <script> $(document).ready(function() { var cookieSzin = $.cookie("test"); if (cookieSzin !== "undefined"){ $(".main").css('background',cookieSzin); } $(".red").click(function(){ $('.main').css('background','#BC4C59'); $.cookie("test", "#BC4C59"); }); $('.pink').click(function(){ $('.main').css('background','#4C69BC'); $.cookie("test", "#4C69BC"); }); }); </script> </html>
Mutasd a teljes hozzászólást!

  • A kérdésed és a kódod kissé zavaros és a Forráskód gombot is elfelejtetted...
    Most vagy klikkre vagy oldal betöltődés után érvényesítsd a class alapján az adottt elemek színét...
    Minden oldlanál ua. CSS-beáálítást hívd meg és menni fog a dolog...
    Megj: Inkább adj egy linket az oldalad eléréséről, akkor konkrétabbat lehet mondani...
    Mutasd a teljes hozzászólást!
  • Szia!

    Egy sütiben elmented a kiválasztott színt és az annak megfelelő css fájlt töltöd be. Értelem szerűen annyi css-t írsz ahány színt szeretnél. A link tag-nek adsz egy id-t  és jQuery-vel klikk-re vagy akármilyen eseményre a link href tulajdonságát átirod, a megfelelőre (kapott szín), majd elmented sütibe ezt az értéket.

    Alapból meg megnézed létezik -e a süti és ha igen akkor aszerint töltöd be a css-t.
    Mutasd a teljes hozzászólást!
  • Szia 

    Phresh megoldása nagyjából :D 

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="bootstrap.css"> </head> <body class="main"> <div class="red"></div> <div class="pink"></div> </body> <style> .red{ content:''; position:relative; top:0px; left:0px; height:20px; width:20px; background:#BC4C59; cursor:pointer; } .pink{ content:''; position:relative; top:-20px; left:20px; height:20px; width:20px; background:#4C69BC; cursor:pointer; } </style> <script> $(document).ready(function() { var cookieSzin = $.cookie("test"); if (cookieSzin !== "undefined"){ $(".main").css('background',cookieSzin); } $(".red").click(function(){ $('.main').css('background','#BC4C59'); $.cookie("test", "#BC4C59"); }); $('.pink').click(function(){ $('.main').css('background','#4C69BC'); $.cookie("test", "#4C69BC"); }); }); </script> </html>
    Mutasd a teljes hozzászólást!
  • Nehogy már "szegény kérdező" gondolkodjon vagy tegyen is valamit a saját fejlődése érdekében...
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd