Aktivní karta při otevření s možností sdílení pomocí karty URL

V tomto případě na jedné stránce s kartami bootstrap nastává problém, když uživatel chce sdílet obsah na základě otevřených karet (ne první karty, která je obvykle výchozí).

Účel

Otevřít cílovou kartu při otevření okna s adresou URL

Vyžadovat

• Bootstrap; js tab funkce
• Jquery a javascript

Skript

Chcete-li kartu aktivovat, nejprve vytvořte activeTab funkce se známým parametrem názvu vzoru. Poté už jen aktivuji funkci. Poznámka:V této části je důležité porozumět kartě js v Bootstrap!

//<1>
    function activaTab(tab){
          let someTabTriggerEl = $('.nav-tabs button[data-bs-target="#nav-' + tab + '"]')
          let tab = new bootstrap.Tab(someTabTriggerEl)
          tab.show()
    };

Před provedením activeTab potřebuji načíst všechny položky karty pomocí selektoru jquery s atributem třídy tag-tab . Položka záložky html je následující <span id="audio" class="tab-tag">Audio</span> , poté provede dotaz s podmínkou, že atribut id je stejný jako tagUrl , který se získá z rozdělené adresy URL s atributem rozdělení # , např. http:/website.org/page.php#audio .

//<2>
    // get URl
    let curentUrl = window.location.href;
    var tagUrl = curentUrl.split("#")[1];

    // query tab to active function <1>
    var arrTag = $('.tab-tag');
    if (typeof tagUrl !== "undefined") {
      arrTag.each(function(){
          let tagSpesific = ($(this).attr('id'));
          if (tagSpesific == tagUrl){ 
            activaTab(tagUrl);
          }
      });
    }

Hotovo