Tab pada JavaScript

Sekarang kita akan mengimplementasikan tab. Langsung lihat contoh yang diperlukan dari Anda:

Pelajari juga markup tempat kita akan menyelesaikan tugas:

<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">
			teks tab 1
		</div>
		<div class="tab">
			teks tab 2
		</div>
		<div class="tab">
			teks tab 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;
}

Perhatikan bahwa tautan aktif dan tab aktif memiliki kelas active.

Diskusi

Sekarang mari kita bahas cara menyelesaikan tugas ini. Jelas bahwa kita perlu menghubungkan tautan dengan tab yang sesuai. Dalam pelajaran ini dari buku teks teoritis, kita sudah membahas opsi yang mungkin.

Dalam kasus ini, saya menawarkan untuk menghubungkan tautan dan tab hanya berdasarkan posisi: tautan pertama akan membuka tab pertama, tautan kedua - tab kedua, dan seterusnya.

Algoritma umum akan terlihat seperti ini: saat mengklik sebuah tombol, kita harus menemukan tautan dengan kelas dan menghapus kelas darinya. Dengan cara yang sama kita harus menemukan tab dengan kelas ini dan juga menghapus kelas darinya.

Kemudian kita harus mengambil tautan yang diklik dan mengaktifkannya. Lalu kita harus mengambil tab yang memiliki nomor yang sama seperti tautan kita - dan juga mengaktifkannya.

Salin kode HTML dan CSS yang diberikan. Implementasikan tab sesuai dengan algoritma yang dijelaskan.