There’s an easier way to do this, and it requires no JavaScript. Use the :target CSS selector.

<div class="tab" id="tab1">
  <h1>This is Tab #1</h1>
</div>

<div class="tab" id="tab2">
  <h1>This is Tab #2</h1>
</div>

In your CSS, start with something like this:

.tab {
  display: none;
}
.tab:target {
  display: block;
}

Then, when you go to page.html#tab1, you’ll see the first tab. Or, page.html#tab2, you’ll see the second.

This should you get you started. You’ll obviously want to set your CSS rules such that one of the tabs is showing by default, for when the page is shown without an anchor fragment. And, you’ll want to link to these anchor fragments from somewhere.

In your case to load a link with specific tab as active you utilize your URL Hash more:

If you have this link:

pockettutor.ie/algebra/#nav-y1

Then

<script language="javascript" type="text/javascript">
  if(window.location.hash) { // Check if url hash is not empty
      var hash = window.location.hash; // nav-y1
      document.querySelector('[href="'+hash+'"]').click();
  }
</script>

I have found the solution to my own question:

In functions.php I added the code:

function wwp_custom_query_vars_filter($vars) {
    $vars[] = 'tab';
    return $vars;
}
add_filter( 'query_vars', 'wwp_custom_query_vars_filter' );

And in the topics.php I added:

?var=variable1

To the url

and in content.php I added the conditions check by calling:

get_query_var('var');

I have 3 php files content.php, functions.php and topics.php
I want that when a user clicks on an link in topics.php that they get redirected to a page with tab1 open and that on the same link but at different button that tab2 is open when they click on the link.

I have tried code with onClick=”” and with jquery but none of that has worked.

The active tab must reflect where on the site the user has clicked (i.e. whether the user clicked the first ‘Algebra’ link or the second one).

The links are defined and created in topics.php