Tabs
Κώδικας έτοιμος για styling
Πολλαπλά tabs στην ίδια σελίδα, mouse events κτλ

Στο παρόν άρθρο θα βρεις έτοιμο lightweight κώδικα για να δημιουργείς Tabs στις ιστοσελίδες.

Ο κώδικας έχει δημιουργηθεί για προσωπικές ανάγκες αλλά θεωρώ πως θα είναι χρήσιμος και για άλλους.

Το μόνο που χρειάζεται είναι να γράψουμε απευθείας το html markup για τα tabs, και να δημιουργήσουμε το σχετικό styling όπως το επιθυμούμε χωρίς να χρειάζεται να κάνουμε override styling καθώς έχω περάσει μόνο τον απολύτως απαραίτητο κώδικα. Έγραψα vanilla JavaScript ο οποίος είναι έτοιμος για χρήση χωρίς να χρειαστεί κάποια μετατροπή.

Tabs: ιδιαίτερα χαρακτηριστικά

• Δυνατότητα χρήσης πολλαπλών tabs στην ίδια σελίδα.
• Τα tabs και τα tabs content δεν χρειάζεται απαραιτήτως να έχουν την κλασσική μορφή καθώς τα tabs content είναι εντός ένα Div ξέχωρο των tab list ώστε να μπορούμε να τα θέσουμε όπου θέλουμε εντός της σελίδας.
• Μέσω του data attribute: data-nb_mouse_event=””, δηλώνουμε mouse events όπως “click”, “mouseover” (default λειτουργία να δεν δηλώσουμε είναι το click) ώστε να ενεργοποιείτε το σχετικό tab με το click ή το hover κτλ

Tabs κώδικας με παράδειγμα για το html markup

Javascript

Το ενσωματώνουμε ως έχει στο project μας

const nb_tab_groups_ids = document.querySelectorAll("[data-nb_tab_group_id]");
if (nb_tab_groups_ids) {
    nb_tab_groups_ids.forEach((tab_group_id) => {
        const nb_tabs = tab_group_id.querySelectorAll("[role='tab']");
        const nb_tab_content = document.querySelector(tab_group_id.dataset.nb_tab_group_id);
        let nb_mouse_event = tab_group_id.dataset.nb_mouse_event;
        if (!nb_mouse_event) nb_mouse_event = "click";

        if (nb_tabs && nb_tab_content) {
            nb_tabs.forEach((tab) => {
                tab.addEventListener(nb_mouse_event, () => {
                    // Change already activated tab content
                    // hide all tab contents
                    let all_tab_contents = nb_tab_content.querySelectorAll("[role='tabpanel']");
                    all_tab_contents.forEach((e) => {
                        e.setAttribute("hidden", true);
                    });
                    // open new tab content
                    let target_tab_content = document.querySelector("#" + tab.getAttribute("aria-controls"));
                    target_tab_content.removeAttribute("hidden");

                    // Change styling for active tab
                    let activated_tab = tab_group_id.querySelector("[aria-selected='true']");
                    if (activated_tab) activated_tab.setAttribute("aria-selected", false);
                    tab.setAttribute("aria-selected", true);
                });
            });
        }
    });
}

CSS

ul[data-nb_tab_group_id] {
    list-style: none;
    display: flex;
}
ul[data-nb_tab_group_id] li {
    cursor: pointer;
}
ul[data-nb_tab_group_id] li:not(:last-child) {
    margin-right: 30px;
}
ul[data-nb_tab_group_id] li[aria-selected="true"] {
    border-bottom: 2px solid teal;
}

HTML

Είναι απαραίτητο να διατηρήσουμε όλα τα aria, role κτλ ως έχουν

• data-nb_mouse_event=”mouseover”. Δηλώνουμε κάποιο mouse event, διαφορετικά αφαιρούμε το data-nb_mouse_event για την default “click” λειτουργία
• Τab: σε όλα δηλώνουμε aria-selected=”false”. Αν θέλουμε κάποιο ανοιχτό από προεπιλογή, δηλώνουμε το συγκεκριμένο ως “true”
• Tab content: σε όλα δηλώνουμε hidden. Αν θέλουμε κάποιο ανοιχτό από προεπιλογή, στο συγκεκριμένο δεν δηλώνουμε το hidden.

<ul data-nb_tab_group_id="#the_tab_id" data-nb_mouse_event="mouseover" role="tablist">
    <li role="tab" aria-controls="javascript" aria-selected="true">JavaScirpt</li>
    <li role="tab" aria-controls="wordpress" aria-selected="false">WordPress</li>
    <li role="tab" aria-controls="gutenberg" aria-selected="false">Gutenberg</li>
</ul>
<div id="the_tab_id">
    <div id="javascript" role="tabpanel">
        <h1>JavaScirpt</h1>
    </div>
    <div id="wordpress" role="tabpanel" hidden>
        <h1>WordPress</h1>
    </div>
    <div id="gutenberg" role="tabpanel" hidden>
        <h1>Gutenberg</h1>
    </div>
</div>

Ο παραπάνω κώδικας υπάρχει και στον Github λογαριασμό μου.