Menu com navegação one page

[Sapinn 0]

Fala galera blz? Então preciso de ajuda numa coisa aqui que não sei de jeito nenhum como resolver.

Eu encontrei na W3School um menu tab vertical perfeito para minha página que é one page. Segui o link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs

Mas estou me encontrando com um problema! Eu gostaria que esse menu permanece-se na mesma tag mesmo atualizando a página, por exemplo, se eu escolher a segunda opção do menu

ela permanecerá ativada mesmo se eu atualizar a página. Na opção oferecida pela W3Shool, toda vez que a página é atualizada ele volta para a primeira tag que tem por padrão a primeira opção com um active. Não sei como resolver ou se tem uma solução para algo assim mas se alguém puder me ajudar eu agradeceria muito.

[Thiago Az 0]

Fala ae blz @Sapinn ?

 

Você pode usar localStorage para armazenar a informação do menu clicado e ao carregar a página será carregada no menu que foi clicado anteriormente.

 

Alteração feito no CSS, precisei adicionar na classe CSS .tabcontent a propriedade display block

 

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
  display: none;
}

 

No HTML adicionei novos atributos no link.

 

<div class="tab">
  <button class="tablinks" onclick="openCity(this, event, 'London_link')" id="London_link">London</button>
  <button class="tablinks" onclick="openCity(this, event, 'Paris_link')" id="Paris_link">Paris</button>
  <button class="tablinks" onclick="openCity(this, event, 'Tokyo_link')" id="Tokyo_link">Tokyo</button>
</div>

 

Já no JS alterei um pouco a lógica.

 

<script>

  window.onload = function () {


    if (!window.localStorage.getItem('start')) {

      const firstLink = document.getElementById('London_link');
      const firstCity = document.getElementById('London');

      firstLink.className += ' active';
      firstCity.style.display = 'block';

    } else {

      let cityLinkId = document.getElementById(window.localStorage.getItem('cityLinkId'));
      cityLinkId.className += ' active';

      let cityId = document.getElementById(window.localStorage.getItem('cityId'));
      cityId.style.display = 'block';

    }

    window.localStorage.setItem('start', 1);
  }

  function openCity(element, evt, cityName) {

    /* Reset class tablinks */
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    /* Reset class tabcontent */
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }


    /* set and get localstorage link */
    window.localStorage.setItem('cityLinkId', cityName);
    let getCityLinkId = window.localStorage.getItem('cityLinkId');

    let cityLinkId = document.getElementById(window.localStorage.getItem('cityLinkId'));
    cityLinkId.className += ' active';


    /* set and get localstorage content */
    let cityTabContent = cityName.split('_');
    window.localStorage.setItem('cityId', cityTabContent[0]);

    let cityId = document.getElementById(window.localStorage.getItem('cityId'));
    cityId.style.display = 'block';
  }

</script>

 

 

[Sapinn 0]

Poxa cara muito obrigado mesmo estava a dias tentando fazer isso mas sem sucesso, muito obrigado mesmo.