I have a scenario with two tabs on a webpage, each with anchor tags that I can navigate to from the homepage using a header menu item anchor. The tabs are working fine with an active class and aria-expanded="true", but I'm facing an issue where the appropriate tab does not automatically become active when clicking on the header menu item.
For example: 1. Click on the #tab2 link in the header menu 2. Page loads, scroll to anchor tag, but tab1 remains open instead of tab2
I have attempted changing the active class, but I am relatively new to javascript/jquery and unsure if I am doing it correctly. Additionally, this is in WordPress and the header menu does not have an id field for its elements.
===============================
EDIT, CLARIFICATION: The tabs are functional, and I can access them from the header link. I just need the correct tab to be open based on the header link clicked.
I also tried using a .click(#tab2) function, but the script did not execute properly.
if(window.location.href.indexOf("tab2") > -1) {
document.getElementById('tab2').click();
}
Edit: Header HTML for link:
<ul class="uk-nav uk-nav-navbar">
<li class="uk-active">
<a title="" href="testsite.com/#tab1" >tab 1</a></li>
<li class="uk-active"><a title="" href="testsite.com/#tab2"
class="">tab2</a>
</li>
</ul>
Tab HTML
<li class="uk-width-medium-1-4 active" id="tab1" aria-expanded="false">
<a class="uk-button tab1">tab1</a>
</li>
<li class="uk-width-medium-1-4 " id="tab2" aria-expanded="false">
<a class="uk-button tab2">tab2</a>
</li>
Javascript:
var ai = document.getElementById(""); [I'm having trouble with this, cause I can't see a way to attach an id to a wordpress menu item]
var ch = document.getElementById("");
ai.onclick = function(){
document.getElementById('tab1').click();
}
ch.onclick = function(){
document.getElementById('tab2').click();
}