javascript - With tabbed links inside another how to keep heading active?

Question

Hard to explain in title. So I show image. (cant show image due to low reputation as new member)

• link to image... i.gyazo.com/12243c1a729009d879a899327ca5c5c3.png
• link to image... i.gyazo.com/602b8517d14a189f68f50758cb02a453.png

So i have 2 tabs, a header then tabs within the header element.

So you would click on league tables then option to view 3 league tables. But once click on the "div" tab the active class removes from the header eg "League tables".

I wasnt sure how to code this, I tried giving league tables/goalscorers a different class from the divs. But that didnt work.

Maybe I need to make 2 functions not one?

One function for headers and one for the Div tabs?

Here is my current code. One function to cover all.

function openDiv(evt, divName) {
     var i, tabcontent, tablinks, tablinks2;
     tabcontent = document.getElementsByClassName("tabcontent");
     for (i = 0; i < tabcontent.length; i++) {
     tabcontent[i].style.display = "none";
     }  
     tablinks = document.getElementsByClassName("tablinks");
     for (i = 0; i < tablinks.length; i++) {
     tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(divName).style.display = "block";
    evt.currentTarget.className += " active";
    }

question from:https://stackoverflow.com/questions/65835492/with-tabbed-links-inside-another-how-to-keep-heading-active

Answer 1

I solved the issue.

I had to make 2 functions.

One for the headers, that would activate the submenus depending what heading was clicked on.

Then the function for the actual sub menu itself.