|
Сообщение от Radrigo
|
|
Можно ли при помощи css менять стили именно тех элементов "Маленький, Средний, Большой" которые на данный момент активны. Допустим по умолчанию загружается "Маленький" то эта надпись была бы красной, а при переключении красным становилась бы та надпись, которую переключили.
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.activeLi {
color: red;
}
</style>
</head>
<body>
<ul>
<li class="fontSelect activeLi" onclick="document.getElementById('idblock').className = 'classFirst';">Маленький</li>
<li class="fontSelect" onclick="document.getElementById('idblock').className = 'classSecond';">Средний</li>
<li class="fontSelect" onclick="document.getElementById('idblock').className = 'classThird';">Большой</li>
</ul>
<div id="idblock" class="classFirst">Текст Текст Текст Текст Текст </div>
<script>
(function() {
var lis = document.querySelectorAll('.fontSelect');
function highlightActive() {
for(var i = 0; i < lis.length; i++) lis[i].className = 'fontSelect';
this.className += ' activeLi';
}
for(var i = 0; i < lis.length; i++) lis[i].addEventListener('click', highlightActive);
})();
</script>
</body>
</html>