jQuery Smart Tabs
Summary
It's small jquery plugin for adding tabs on page. Plugin very simple in use and also it have several features:
- Change tabs by hash
- Ease to customize
Information for use
1.Insert that layout in your .html file
<div class="tabs"> <ul class="tabs__items"> <li class="tabs__item tabs_active">Tab 1</li> <li class="tabs__item">Tab 2</li> <li class="tabs__item">Tab 3</li> </ul> <div class="tabs__content-wrapper"> <div class="tabs__content tabs_active"> <!-- Here will be content for first tab --> </div> <div class="tabs__content" > <!-- Here will be content for second tab --> </div> <div class="tabs__content"> <!-- Here will be content for third tab --> </div> </div> </div>2.Add script and css files
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Title</title> <link rel="stylesheet" href="node_modules/jquery-smart-tabs/dist/jquery-smart-tabs.css"> </head> <body> <!-- ... --> <script src="node_modules/jquery-smart-tabs/dist/jquery-smart-tabs.js"></script> </body> </html>3.Third clause is no.
Use detection by hash
Insert data-hash attribute in li element with class .tabs__item and now when you move to the link with the hash will be active current tab. If in one tab have one more data-hash attribute with same values will be active last tab item.
