2 варианта, по сути похожих.
Пускай по умолчанию музыка выключена (0) или включена, не так важно.
- Серверный с сессиями. Сохраняйте флаг музыка включена (1)/выключена (0) в сессию. При клике по sound_on/sound_off нужно посылать ajax-запрос на сервер, передавая в параметре 0 или 1, которые сервер положит в сессию
$_SESSION['music'] = $music
.
При обновлении страницы читайте значение из сессии
<?php $music = @$_SESSION['music']; ?>
<span class="text sound_on" style="<?=$music ? 'display: none;' : '';?>">Включить звук</span>
<span class="text sound_off" style="<?=$music ? '' : 'display: none;';?>">Выключить звук</span>
Клиентский с куками без запроса на сервер. При клике по sound_on/sound_off ставьте куку (в данном случае пример с использованием jquery.cookie.js
:
$.cookie('sound', 1);
$.cookie('sound', 0);
При F5 проверяйте на js есть ли кука:
<a class="music">
<span class="text sound_on">Включить звук</span>
<span class="text sound_off">Выключить звук</span>
</a>
<script>
$(document).ready(function() {
var sound = $.cookie('sound');
if (sound_on) {
$('.sound_on').hide();
}
else {
$('.sound_off').hide();
}
});
</script>
Я бы выбрал второй вариант. Если страница грузится медленно и заметно что кнопка исчезает когда $(document).ready
срабатывает, вы можете на сервере получать значение куки sound
и html на его основе показывать, как в первом варианте. Только вместо сессии проверять куку.