Tworzenie prostych Tabs i Pills z użyciem Bootstrap i jQuery

Jedną z ciekawszych funkcji bootstrap są zakładki (angielskie tabs lub pills). Jest to funkcjonalność dość powszechnie stosowana na strona internetowych. Dużą jej zaletą jest pokazywanie innej treści w zależności od aktywnej „karty” przy czym adres strony pozostaje ten sam, lub zawiera „#”+nazwa „karty”.

Nazwa zakładki wzięła się prawdopodobnie z podobieństwa do książki gdzie można używać zakładki do zaznaczenia określonej strony.

Niestety w moim szablonie bootstrap nie działa prawidłowo dlatego gotowe demo znajduje się w osobnym pliku.

Różnice między tabs i pills w bootstrap jest widoczna na pierwszy rzut oka

Przykładowe Tabs

• Home
• Menu 1
• Menu 2
• Menu 3

  
Home
  
Menu 1
  
Menu 2
  
Menu 3

Przykładowe Pills

• Home
• Menu 1
• Menu 2
• Menu 3

  
Home
  
Menu 1
  
Menu 2
  
Menu 3

Powyższe przykłady nie stanowią działającego skryptu a jedynie wstęp, podstawę do uzyskania określonego sposobu działania.

Jak wspomniałam zakładki często występują na stronach internetowych. Jeśli chodzi o ich funkcje to już zależy od inwencji autora strony np:

• Home
• Menu 1
  • Submenu 1-1
  • Submenu 1-2
  • Submenu 1-3
• Menu 2
• Menu 3

  
Home
  

    Menu 1
    
    

      
Submenu 1-1
      
Submenu 1-2
      
Submenu 1-3
 
    
  
  
Menu 2
  
Menu 3

To jednak również nie działa. W celu uruchomienia skryptu należy jeszcze dopisać pola z tekstem np.
DEMO

  
Co znajdziesz w tym wpisie
1 Vertical Pills
2 HOME
3 Menu 1
4 Menu 2
5 Menu 3
Vertical Pills
  

    

    

      
HOME
      
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
    

      
Menu 1
      
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    
    

      
Menu 2
      
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
    
    

      
Menu 3
      
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    
  
    

      

        
Home
    
Menu 1
    
Menu 2
    
Menu 3
      
    
    

  

By skrypt działał prawidłowo należy na stronie umieścić odnośnik do skryptów. Muszą się one znajdować pomiędzy znacznikami head head: