Καρτέλες σε JavaScript

Τώρα θα υλοποιήσουμε καρτέλες. Αμέσως δείτε το δείγμα του τι απαιτείται από εσάς:

Μελετήστε επίσης τη σήμανση πάνω στην οποία θα λύσουμε το πρόβλημα:

<div id="parent">
	<div class="menu">
		<a href="" class="active">καρτέλα 1</a>
		<a href="">καρτέλα 2</a>
		<a href="">καρτέλα 3</a>
	</div>
	<div class="tabs">
		<div class="tab active">
			κείμενο καρτέλας 1
		</div>
		<div class="tab">
			κείμενο καρτέλας 2
		</div>
		<div class="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;
}

Παρατηρήστε ότι ο ενεργός σύνδεσμος και η ενεργή καρτέλα έχουν την κλάση active.

Συζήτηση

Ας συζητήσουμε τώρα πώς να λύσουμε αυτό το πρόβλημα. Προφανώς, πρέπει να συνδέσουμε με κάποιο τρόπο τους συνδέσμους με τις αντίστοιχες καρτέλες τους. Σε αυτό το μάθημα από το θεωρητικό εγχειρίδιο, έχουμε ήδη αναλύσει τις πιθανές επιλογές.

Σε αυτήν την περίπτωση, προτείνω να συνδέσουμε τους συνδέσμους και τις καρτέλες απλά βάσει θέσης: ο πρώτος σύνδεσμος θα ανοίγει την πρώτη καρτέλα, ο δεύτερος σύνδεσμος - τη δεύτερη καρτέλα και ούτω καθεξής.

Ο γενικός αλγόριθμος θα μοιάζει με αυτόν: upon clicking στον σύνδεσμο πρέπει να βρούμε τον σύνδεσμο με την κλάση και να του αφαιρέσουμε αυτήν την κλάση. Παρόμοια πρέπει να βρούμε την καρτέλα με αυτήν την κλάση και να της αφαιρέσουμε επίσης αυτήν την κλάση.

Στη συνέχεια, πρέπει να πάρουμε τον σύνδεσμο στον οποίο έγινε κλικ και να τον ενεργοποιήσουμε. Μετά πρέπει να πάρουμε την καρτέλα που έχει τον ίδιο αριθμό όπως ο σύνδεσμός μας - και να την ενεργοποιήσουμε επίσης.

Αντιγράψτε στον εαυτό σας τους παρεχόμενους κώδικες HTML και CSS. Υλοποιήστε τις καρτέλες σύμφωνα με τον περιγραφόμενο αλγόριθμο.