Показать сообщение отдельно
  #9 (permalink)  
Старый 03.07.2019, 15:54
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Обратите внимание, что standard, а не standart! Вместо печенек лучше использовать локальное хранилище!

<div id="color">
	<button id="standard">standard</button>
	<button id="invert">invert</button>
	<button id="blue">blue</button>	
</div>

<div class="logo"><img></div>

<style>

html, body {
	background: no-repeat center;
	height: 100%;
}

body.standard {
	background-color: white;
}

body.invert {
	background-color: black;
}

body.blue {
	background-color: blue;
}

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>

function setTheme(id) {
	var images = {
		standard: "https://picsum.photos/id/1081/640/480",
		invert: "https://picsum.photos/id/1004/640/480",
		blue: "https://picsum.photos/id/1015/640/480"
	};
	$("body").addClass(id);
	$(".logo img").attr("src", images[id]);

	localStorage.color = id;
}
	
$(function() {
	setTheme(localStorage.color || "standard");
});

$("#color button").on("click", function() {
	$("body").removeClass("standard invert blue");
	
	var id = $(this).attr("id");
	setTheme(id);
});

	
</script>


рони, SAncheZ, зачем повторять однотипный код?

Последний раз редактировалось Malleys, 03.07.2019 в 16:18. Причина: Перенёс localStorage.color = id; в функцию setTheme
Ответить с цитированием