Tabs in JavaScript

We are now implementing tabs. Take a look at a sample of what is required of you:

Also study the layout with which we will solve the problem:

<div id="parent">
	<div class="menu">
		<a href="" class="active">tab 1</a>
		<a href="">tab 2</a>
		<a href="">tab 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			tab text 1
		</div>
		<div class="tab">
			tab text 2
		</div>
		<div class="tab">
			tab text 3
		</div>
	</div>
</div>

#parent {
	margin: 0 auto;
	width: 400px;
}

.menu a {
	margin-right: 5px;
	display: inline-block;
	padding: 10px;
	color: black;
	text-decoration: none;
	border: 1px solid gray;
}
.menu a:hover {
	background: #f8f8f8;
}
.menu a.active {
	border-color: transparent;
	background: #f2f2f2;
}

.tabs .tab:not(.active) {
	display: none;
}
.tabs .tab {
	padding: 10px;
	background: #f2f2f2;
	height: 300px;
}

Note that the active link and active tab have the active class.

Discussion

Let's now discuss how to solve this problem. Obviously, you need to somehow link the links to their respective tabs. In this lesson from the theoretical tutorial, we have already analyzed the possible options.

In this case, I propose to link links and tabs simply by position: the first link will open the first tab, the second link will open the second tab, and so on.

The general algorithm will look like this: by clicking on the button, we must find a link with a class and remove this class from it. Similarly, we must find a tab with this class and also remove this class from it.

Then we have to take the link that was clicked and activate it. Then we must take the tab that has the same number as our link - and activate it too.

Copy the provided HTML and CSS codes. Implement tabs according to the described algorithm.