Tab trên JavaScript

Bây giờ chúng ta sẽ triển khai tab. Ngay lập tức xem mẫu những gì được yêu cầu từ bạn:

Hãy cũng nghiên cứu bố cục mà chúng ta sẽ giải quyết nhiệm vụ trên đó:

<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">
			nội dung tab 1
		</div>
		<div class="tab">
			nội dung tab 2
		</div>
		<div class="tab">
			nội dung 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;
}

Chú ý rằng liên kết đang hoạt động và tab đang hoạt động có lớp active.

Thảo luận

Bây giờ hãy thảo luận về cách giải quyết nhiệm vụ này. Rõ ràng là cần phải liên kết nào đó các liên kết với các tab tương ứng của chúng. Trong bài học này từ sách lý thuyết chúng ta đã phân tích các tùy chọn có thể.

Trong trường hợp này tôi đề xuất liên kết các liên kết và tab đơn giản theo vị trí: liên kết đầu tiên sẽ mở tab đầu tiên, liên kết thứ hai - tab thứ hai và cứ thế.

Thuật toán chung sẽ trông như thế này: khi nhấn vào nút chúng ta phải tìm liên kết có lớp và xóa lớp đó khỏi nó. Tương tự như vậy chúng ta phải tìm tab có lớp này và cũng xóa lớp đó khỏi nó.

Sau đó chúng ta phải lấy liên kết mà đã được nhấp và kích hoạt nó. Sau đó chúng ta phải lấy tab có cùng số thứ tự, như liên kết của chúng ta - và cũng kích hoạt nó.

Sao chép các mã HTML và CSS đã cho cho bạn. Triển khai tab theo thuật toán đã mô tả.