Добрый день!!Прошу помощи или подсказки как упростить данный код и сделать так чтоб запоминалась выбранная ширина колонок, например: я нажал на кнопку "показать по 4" и кол-во столбцов стало 4 и обновив страницу я все равно увидел 4 столбца, а не два.
<script>
$(document).ready(function(){
$("#button-2").click(function(){
$("#button-2").addClass("active");
$("#button-2").removeClass("nonactive");
$("#button-4").removeClass("active");
$("#button-4").addClass("nonactive");
$("#column-block").removeClass("column-block-4");
});
});
$(document).ready(function(){
$("#button-4").click(function(){
$("#button-4").addClass("active");
$("#button-4").removeClass("nonactive");
$("#button-2").removeClass("active");
$("#button-2").addClass("nonactive");
$("#column-block").addClass("column-block-4");
});
});
</script>
<style>
.nonactive {color: #aaa;}
.active {color: #222;}
#column-block {width: auto;}
.column {display: inline-block; width: 50%;}
.column-block-4 .column {width: 25%;}
</style>
<div>
<span id="button-2" class="active">показать по 2</span>
<span id="button-4" class="nonactive">показать по 4</span>
</div>
<div id="column-block" class="column-block">
<div class="column">колонка 1</div>
<div class="column">колонка 2</div>
<div class="column">колонка 3</div>
<div class="column">колонка 4</div>
</div>