Warum funktioniert die Funktionalität der Registerkarten nicht? ⇐ CSS

[Anonymous]

Ich bin ein Anfänger -Webentwickler Learning Front End Development. Vor kurzem habe ich an einem Projekt von Front End Mentor gearbeitet. Es hat eine Funktionalität, die, wenn der Name einer Registerkarte klickt, auf den Inhalt klickt. Ich habe es versucht, aber es funktioniert nicht.

Code: Select all

const allTabs = document.querySelector(".allTabs");
const btnsAll = document.querySelectorAll(".tab-btn");
const articles = document.querySelectorAll(".tab");

allTabs.addEventListener("click", function(e) {
const id = e.target.dataset.id;
if (id) {
// remove active from other buttons
btnsAll.forEach(function(btn) {
btn.classList.remove("active");
e.target.classList.add("active");
});
// hide other all articles
articles.forEach(function(article) {
article.classList.remove("active");
});
const element = document.getElementById(id);
element.classList.add("active");
}
});< /code>
.tab {
display: none;
}

.tab-btn.active {
border-bottom: 3px solid hsl(0, 94%, 66%);
}

.tab.active {
display: flex;
margin-left: 4.2rem;
margin-right: 4.2rem;

}< /code>


Features
Our aim is to make it quick and easy for you to access your favourite websites.
Your bookmarks sync between your devices so you can access them on the go.




Simple Bookmarking
Speedy Searching
Easy Sharing

[img]./images/illustration-features-tab-1.svg[/img]

Bookmark in one click
Organize your bookmarks however you like. Our simple [url=viewtopic.php?t=13405]drag-and-drop[/url] interface
gives you complete control over how you manage your favourite sites.
More Info


[img]./images/illustration-features-tab-2.svg[/img]

Intelligent search
Our powerful search feature will help you find saved sites in no time at all.
No need to trawl through all of your bookmarks.
More Info


[img]./images/illustration-features-tab-3.svg[/img]

Share your bookmarks
Easily share your bookmarks and collections with others. Create a shareable
link that you can send at the click of a button.
More Info


< /code>
< /div>
< /div>
< /p>
Kann jemand dies beheben? Dieser CSS -Code fügt den aktiven Registerkarten und ihren entsprechenden Artikeln Stile hinzu. Wenn eine Registerkarte klickt, wird die .aktive Klasse sowohl zur Schaltfläche .tab-BTN als auch zum .tab-Artikel hinzugefügt, der die in diesem CSS-Code angegebenen Stile auslöst.border-bottom: 3px solid hsl(0, 94%, 66%);

: Fügt der aktiven Registerkarte einen farbigen unteren Rand hinzu, um anzugeben, welche Registerkarte derzeit ausgewählt ist.

Code: Select all

margin-left: 4.2rem; margin-right: 4.2rem; display: flex;

: Fügt links und rechts einen gewissen Spielraum hinsichtlich des aktiven Registerkartenartikels hinzu und legt seine Anzeige auf Flex fest, um eine flexiblere Positionierung zu ermöglichen.

Code: Select all

display: block; justify-content: left;

: Legt die Anzeige auf, um den aktiven Artikel zu blockieren, und richtet seinen Inhalt links aus.

Code: Select all

text-align: left; display: block; margin-top: 6rem; padding-left: 3rem;

: Fügt links hinter dem Titel des aktiven Artikels einige Margin und Polsterung hinzu und richtet ihn nach links aus.

Code: Select all

text-align: left; padding-left: 1.4rem;

: richtet den Text des aktiven Artikel nach links aus und fügt links etwas Polster hinzu.

Code: Select all

display: block; margin-left: 3rem; margin-top: 2rem;

: Positioniert die Schaltfläche "Weitere Info" für den aktiven Artikel, indem Sie links und oben einige Ränder hinzufügen. In diesem Abschnitt befindet sich ein Container mit drei Schaltflächen mit der Klasse "tab-BTN" und die IDs "tab1", "tab2" und "tab3". Die erste Schaltfläche enthält die Klasse "Active", die angibt, dass es sich um die Standard -Aktivitätsregisterkarte handelt. Die Registerkarte enthält ein Bild und einen Artikel mit einem Titel, einem Absatz von Text und einer Schaltfläche mit der Klasse "tab-btn-more-info". Das Registerkarte System bietet eine Möglichkeit, verschiedene Funktionen zu präsentieren und zu wechseln, ohne die Schnittstelle zu überfüllen.