Как сделать запоминание вкладки после перезагрузки страницы?

Question

[Rokis]

Как сделать в ТАКИХ табах запоминание после перезагрузки страницы?

<div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1" title="Вкладка 1">1</label>
 
    <input id="tab2" type="radio" name="tabs">
    <label for="tab2" title="Вкладка 2">2</label>
 
    <input id="tab3" type="radio" name="tabs">
    <label for="tab3" title="Вкладка 3">3</label>
 
    <input id="tab4" type="radio" name="tabs">
    <label for="tab4" title="Вкладка 4">4</label>
 
    <section id="content1">
        <li>
		<a href="">1</a> 
		  <a href="">2</a>
        </li>
    </section>  
    <section id="content2">
        <li>
		  <a href="">1</a>
		  <a href="">2</a>
		   <a href="">3</a>
        </li>
    </section> 
    <section id="content3">
        <li>
          <a href="#">1</a>
		</li>
    </section> 
    <section id="content4">
        <li>
          <a href="#">1</a>
		   <a href="#">2</a>
		
        </li>
    </section>    
</div>

CSS:

/* Базовый контейнер табов */
.tabs {}
/* стили секций с содержанием */
section {display: none;}
.tabs input {display: none;}
/* стили вкладок (табов) */
.tabs label {}
/* стили для активной вкладки */
.tabs input:checked + label {}
/* активация секций с помощью переключателя :checked */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4
 {display: block;}

Возможно как нибудь реализовать это чисто на CSS? И как вообще можно перелопатить этот код для такой реализации?

Answer 1

[#FFFFFF]

На CSS, боюсь, никак. После перезагрузки страницы "вспомнить" что-то страница может только с помощью сессий или куки.

Comments

[Алексей Уколов]

Лучше хранить текущий таб в якоре, а не в куках и тем более не в сессии. Но на css в якорь не посмотреть в любом случае.

[#FFFFFF]

Алексей Уколов: а если страница не просто перезагружается, а происходит переход по страницам? и после переходов по сайту страница должна выдавать ту вкладку, которая была когда-то открыта? Я думала, загвоздка именно в этом. Кому придет в голову просто сидеть и обновлять страницу.

[Алексей Уколов]

Ну да, лучше использовать комбинацию из localStorage и якоря. При изменении табов - изменяется url и значение пишется в ls. И нужный якорь добавляется во все ссылки. Это самое правильное решение.