如何链接回index.html上的选项卡？

Question

I have three tabs with projects on https://gallant-euclid-b426b2.netlify.com

When you click on a project, you are directed to a new page. I want the tabs to work on that new page. How do I make this happen? So the tab 'school' would link back to the school tab on index.html and the 'projects' tab to the projects tab.

(The back to school tab actually already works, because that's the default tab)

I don't want to use history.back() because someone might send a project link to someone and then there might not be a previous page etc.

<div class="bar">
    <div class="tab">
        <button class="tablinks" id="defaultopenTab" onclick="openTab(event, 'school')">school</button>
        <button class="tablinks" onclick="openTab(event, 'projects')">projects</button>
        <button class="tablinks" onclick="openTab(event, 'about')">about</button>
    </div>
</div>

I hope there is a solution where I can simply say something like:

onclick="location.href='index.html'; openTab(event, projects)"

Answer 1

The tab code on page office.html needs to be the same as in index.html

<div id="school" class="tabcontent">
    <h1>industrial design</h1>
    <div class="project" onclick="location.href='office.html';">
        <div class="img" id="some"></div>
        <div class="name">Project 1</div>
        <div class="label">Industrial Design</div>
    </div>
    <div class="project" onclick="location.href='office.html';">
        <div class="img" id="some"></div>
        <div class="name">Project 2</div>
        <div class="label">Industrial Design</div>
    </div>
    <div class="project_long" onclick="location.href='office.html';">
        <div class="img_long" id="stage"></div>
        <div class="name">Stage</div>
        <div class="label">Industrial Design</div>
    </div>
    <div class="project" onclick="location.href='office.html';">
        <div class="img" id="office"></div>
        <div class="name">Office Rating System</div>
        <div class="label">Industrial Design</div>
    </div>
</div>

You can do this statically by copying and pasting or through a script. For instance, you could bind each tab to a shared javascript file.

Change

<div class="project" onclick="location.href='office.html';">

to

<div class="project" id="office">

then in the script

$(document).on("click","#office",function(){
   windows.open("office.html","_self");
});

Do that for each tab.