Jak stworzyć dynamiczne zakładki (taby) na stronę? CSS/jQuery

Dzisiaj coś trochę z innej bajki ponieważ zajmę się tworzeniem zakładek, tabów z pomocą jquery. Będzie to coś co w dużym stopniu przypomina menu na stronie (w zachowaniu i wyglądzie), choć działa nieco inaczej.

Proste „menu tabs” w HTML, CSS i jQuery

Połączenie HTML, CSS i jQuery

CSS od wersji 3 posiada naprawdę olbrzymie możliwości i w wielu przypadkach z HTML 5 mogło by świetnie zastąpić skrypty JS – niestety jednak nie zawsze się da. By uzyskać niektóre ciekawe efekty i dodatkowe opcje na stronie musimy skorzystać z dodatkowych bibliotek JavaScript.

W większość przypadków przyczyną jest niedostateczne dostosowanie przeglądarek internetowych lub inny sposób ich interpretacji. Czasem też dana opcja jest wyłączona bo sprawia problemy przeglądarce (np. w urządzeniach mobilnych).

Co to są taby i do czego służą?

O tabach (dynamicznych zakładkach) pisałam już w kontekście omawiania Twiter Bootstrap 3 dlatego pozwólcie, że odeślę was to tego wpisu. W tym miejscu jednak dodam, że z pomocą budowanych przez nas tabów będzie można utworzyć dość proste dynamiczne menu.

To co dokładnie będziemy budować możecie zobaczyć poniżej:

Zaczynamy budowę własnych tabów

Struktura obiektu

Na początek musimy zbudować strukturę HTML naszych tabów. Na początek trzeba stworzyć kontener okalający całość a w nim 2 grupy – przyciski zmieniające karty, oraz same karty z zawartością.

<div class="container">
  <ul class="menu">
    <li class="first active">First tab</li>
    <li class="second">Second tab</li>
    <li class="third">Third tab</li>
  </ul>
  <div class="content">
    <div class="item first">
      <h4>Lorem ipsum dolor sit amet, </h4>
      <p>consectetur adipiscing elit.</p>
    </div>
    <div class="item second">
      <h4>Lorem ipsum dolor sit amet, </h4>
      <p>consectetur adipiscing elit./p>
      <img src="https://cdn.pixabay.com/photo/2016/10/26/09/19/arbutus-1771003__340.jpg" class="rwd">
    </div>
    <div class="item third">
     <h4>Lorem ipsum dolor sit amet, </h4>
      <p>consectetur adipiscing elit. </p>
      <p>Third</p>
    </div>
  </div>
</div>  

W powyższym przykładzie skróciłam nieco tekst w tabach tak by lepiej było widać ich strukturę.

Za zmienianie tabów odpowiada poniższy kod:

<ul class="menu">
    <li class="first active">First tab</li>
    <li class="second">Second tab</li>
    <li class="third">Third tab</li>
  </ul>

Jak widać stworzyłam strukturę analogiczną do menu strony internetowej. Pominęłam jedynie linkowanie gdyż było ono zbędne. Dość istotne w tym kodzie są nazwy klas jakie posiadają ewenementy np.

class="first active"

Nazwy tych klas odpowiadać będą kolejnym kartą.

A tak prezentują się same karty bez zawartości. Jak widać zostały one spięte z pomocą kontenera oraz posiadają jedną taką samą klasę (item).

<div class="content">
    <div class="item first">
    </div>
    <div class="item second">
    </div>
    <div class="item third">
    </div>
  </div>

Druga klasa odpowiada z kolei temu co widzieliśmy wcześniej w menu. Oczywiście w tej chwili z pewnością odezwą się głosy – to nie powinno być w ten sposób zrobione powinnaś użyć id. Być może tak 🙂 jednak dużo osób robi to na id wiec czemu nie na class.

W tej chwili nasze taby nie wyglądają za ciekawie. Właściwie to mamy wypunktowaną listę a pod nią tekst. Żeby to jakoś ogarnąć musimy skorzystać z CSS.

Formatujemy nasz tab (zakładkę)

Poniżej znajdziecie kod CSS jaki stworzyłam do uzyskania efektu tabów

.container {
  margin: 0 auto;
  width: 500px;
  padding: 10px;
}

/* ustawiamy menu */.menu {
  margin-bottom: -1px; // nasunie menu na taby
  padding: 0px;
  position: relative;
  padding: 0px;
}
.menu li {
  display: inline-block;
  padding: 10px;
  background-color: #f7f7f7;
  border: 1px solid #333;
  border-bottom: 0px;
  z-index: 2;
}
.menu li:hover, .menu li.active {
  background-color: #fff;
  color: #bf2424;
  z-index: 1000;
  position: relative;
}
/* ustawiamy karty */.content {
  padding: 0;
  z-index: 12;
  position: relative;
}
.content .item {
  border: 1px solid #333;
  box-shadow: 2px 2px #333;
  min-height: 50px;
  padding: 10px;
  display: none;
  background: #fff;
}
.content .item:first-of-type {
  display: block;
}
.content .item:first-of-type h4 {
  color: #bf2424;
}
.content .rwd {
  max-width: 100%;
  display: block;
}

Po zastosowaniu tego kodu wasz tab powinien wyglądać jak ten (poza tłem pod tabem):

<div class="wp-block-image">
<figure class="aligncenter">
</figure></div>

Nie będzie jednak działał. Po kliknięciu w menu nic się nie stanie. Aby uruchomić nasz kod musimy dodać odpowiedni skrypt.

Uruchamiamy działanie tabów (zakładek)

Teraz musimy dodać do naszej strony bibliotekę jQuery. Jeśli jest już ona dodana to nie musimy już tego robić.

$('.menu li').click(function() {
 var values = $(this).attr('class');
  
  $('.menu li').removeClass('active');
  $(this).addClass('active');
  
  $('.content .item').hide();
  $('.content .' + values).show();
});

Trochę objaśnień do powyższego kodu z pewnością wam nie zaszkodzi 🙂 .

Poniższy kod oznacza, że funkcja zostanie zrealizowana dopiero w tedy gdy klikniemy (.click) w obiekt li, którego element nadrzędny posiada klasę .menu.

$('.menu li').click(function());

Następnie przypisujemy nazwę klasy tego elementu do zmiennej values.

var values = $(this).attr('class');

Teraz ukrywamy z wszystkie element z klasą .item posiadające nadrzędny element z klasą .content.

$('.content .item').hide();

Teraz wyświetlimy/pokażemy elementy, które posiadają nazwę klasy zapisaną w zmiennej  values

$('.content .' + values).show();

Gotowe tabs możecie zobaczyć poniżej: