Simple Tabs Shortcodes

Najczęściej zadawane pytania

Przykładowe użycie

Dostępne są dwa kody skrótowe, poniżej znajduje się ich prosty przykład użycia:

[tabs]
[tab title="First tab"]The content of the first tab.[/tab]
[tab title="Second tab"]The content of the second  tab.[/tab]
[tab title="Third tab"]The content of the third tab.[/tab]
[/tabs]

Wyświetli to następujący kod HTML:

<div class="tabs-container">
    <div class="tabs-nav">
        <ul>
            <li><a href="#first-tab" class="active">First tab</a></li>
            <li><a href="#second-tab">Second tab</a></li>
            <li><a href="#third-tab">Third tab</a></li>
        </ul>
    </div>
    <div class="tabs-content">
        <section id="first-tab" class="tab active">The content of the first tab.</section>
        <section id="second-tab" class="tab">The content of the second tab.</section>
        <section id="third-tab" class="tab">The content of the third tab.</section>
    </div>
</div>

Opcjonalnie można ustawić niestandardowy identyfikator poprzez dodanie id="my-id" w kodzie skrótowym.

Przykładowy CSS

Oto przykładowy CSS, dokonaj niezbędnych zmian jeżeli chcesz dostosować wygląd i działanie zakładek.

.tabs-nav {
    margin: 0;
    border-bottom: 1px solid #ccc;
}
.tabs-nav ul {
    list-style: none;
}
.tabs-nav li {display: inline-block;}
.tabs-nav a {
    display: block;
    padding: 5px 10px;
    border: 1px solid transparent;
    text-decoration: none;
}
.tabs-nav a.active {
    border-color: #ccc;
    border-bottom-color: #fff;
}
section.tab {
    display: none;
    margin-bottom: 15px;
    padding: 15px 0;
}
section.tab.active {display: block;}

Wybieranie zakładki przez URL

Można wybrać domyślną zakładkę za pomocą hasha w adresie URL – wystarczy dodać #nazwa-zakładki na końcu adresu URL strony, aby wybrać konkretną zakładkę. Ten przykładowy adres URL wybierze zakładkę z tytułem / identyfikatorem „cośtam”: http://domain.tld/your-page/#cośtam

Przełączanie do zakładki poprzez link

Zakładki mogą być przełączane za pomocą zwykłego łącza, wystarczy dodać klasę tab-url do łącza. Przykład:

<a class="tab-url" href="#something">Something</a>