Link do konkretnej zakładki na stronie

pytanie zadane 26 stycznia 2022 w HTML i CSS przez OlbudMaciej Nowicjusz (150 p.)

W jaki sposób mogę dodać link, który otworzy konkretną kartę na otwieranej stronie?
Chciałbym, aby przycisk na stronie home otwierał konkretną zakładkę "tab" na innej stronie.
Próbowałem dodać do otwieranych sekcji id i linkować do niego, ale nie działa, bo bez kliknięcia przycisku otworzenia zakładki, sekcja nie ma klasy active.

komentarz 26 stycznia 2022 przez Grzegorz Mikina Dyskutant (8,060 p.)
przeniesione 26 stycznia 2022 przez ScriptyChris

Pokaż kod. Wklej jakiś codepen, sandbox czy coś takiego.

komentarz 26 stycznia 2022 przez OlbudMaciej Nowicjusz (150 p.)

https://codepen.io/p-vostrowski/pen/WNXNVwZ

Chciałbym z innej podstrony zalinkować np. zakładkę 1, żeby ona otworzyła się po kliknięciu w link.

komentarz 26 stycznia 2022 przez OlbudMaciej Nowicjusz (150 p.)

@Grzegorz Mikina, Może skorzystam z bootstrapowych kart. Będzie łatwiej znaleźć na to rozwiązanie...

komentarz 26 stycznia 2022 przez overcq Pasjonat (21,710 p.)

W procedurze obsługi zdarzenia DOMContentLoaded możesz ustawić tę kartę, odczytawszy location.hash.

2 odpowiedzi

odpowiedź 26 stycznia 2022 przez Grzegorz Mikina Dyskutant (8,060 p.)
edycja 26 stycznia 2022 przez Grzegorz Mikina

To co wkleiłeś na Codepen działa poprawnie, nie rozumiem twojego problemu, ja osobiście nie używał bym rozwiązań jQuery, gdyż to stara technologia. Sterowanie klasami w Javascript jest bardzo proste.

komentarz 27 stycznia 2022 przez OlbudMaciej Nowicjusz (150 p.)

Działa to prawda, ale chciałbym otworzyć konkretną kartę na podstronie po kliknięciu w link.
Np kilkam: <a href="/oferta/zakladka-1-open">link do zakładki 1</a> na stronie głównej i otwiera mi się karta w /oferta/zakladka-1-open.
Dzięki za fatygę!

odpowiedź 27 stycznia 2022 przez VBService Ekspert (253,340 p.)
edycja 27 stycznia 2022 przez VBService

Może spróbuj trick z window.location.search

przykład

index.html

<ul>
  <li><a href="podstrona2.html?cmd=show">Pokaż na podstronie menu</a></li>
  <li><a href="podstrona2.html?cmd=hide">Ukryj na podstronie menu</a></li>
</ul>

podstrona2.html

<div id="menu">
  <ul>
    <li>Lorem ipsum 1</li>
    <li>Lorem ipsum 2</li>
    <li>Lorem ipsum 3</li>
    <li>Lorem ipsum 4</li>
    <li>Lorem ipsum 5</li>
  </ul>
</div>
<div id="state">Menu: <span></span></div>
<br />
<a href="index.html">powrót</a>
 
<script>
  window.onload = () => {
    if (window.location.search.split('?').length > 1) {
      const cmd = window.location.search.split('?')[1].split('=')[1];
      menu(cmd);
    }
  }
 
  function menu(cmd) {
    document.querySelector('#state span').textContent = cmd;
    cmd = (cmd == 'show') ? 'block':'none';
    document.querySelector('#menu').style.display = cmd;    
  }   
</script>

P.S.