Tab pada JavaScript

Sekarang kami akan melaksanakan tab. Segera lihat contoh apa yang diperlukan daripada anda:

Kaji juga susun atur yang akan kami gunakan untuk 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 bahawa pautan aktif dan tab aktif mempunyai kelas active.

Perbincangan

Sekarang mari kita bincangkan cara untuk menyelesaikan tugas ini. Jelas sekali, pautan perlu dikaitkan dengan tab yang sepadan. Dalam pelajaran ini daripada buku teks teori, kami telah membincangkan pilihan yang mungkin.

Dalam kes ini, saya cadangkan untuk mengaitkan pautan dan tab hanya mengikut kedudukan: pautan pertama akan membuka tab pertama, pautan kedua - tab kedua, dan seterusnya.

Algoritma umum akan kelihatan seperti ini: apabila diklik, kami perlu mencari pautan dengan kelas dan mengalihkelaskannya. Dengan cara yang sama, kami perlu mencari tab dengan kelas itu dan juga mengalihkelaskannya.

Kemudian kami perlu mengambil pautan yang diklik dan mengaktifkannya. Kemudian kami perlu mengambil tab yang mempunyai nombor yang sama seperti pautan kami - dan juga mengaktifkannya.

Salin kod HTML dan CSS yang diberikan. Laksanakan tab mengikut algoritma yang diterangkan.