:::: MENU ::::

Flat UI – Simple HTML tabs without jQuery or any other library

jQuery UI provides extremely simple way to implement HTML tabs. In this tutorial I’ll show how to implement that simple tabs without jQuery.

simple_tab

HTML structure for Tabs

Here only important part is supply unique css class name to make tabs.

i.e. <div class=”tabs”>

here we took class=”tabs” property of tab container.

Initializing tabs

 CSS to make Flat UI tabs

Pure Javascript Tabs implementation (tabs.js)

 Explanation of tabs.js

  • Make active tab using class=”active” in HTML and initialize script at bottom of your page.
  • Script initialize with document.querySelectorAll(“.tabs li a”) to get list of all anchors styled as tab buttons.
  • Then it gets all tab divs (which contains content for tabs) using document.querySelector(“.tabs”).getElementsByTagName(“div”) and make that div visible among all content divs (made hidden by CSS)
  • Then we assigned event listener to all tabs button.
  • So, whenever you click tab, Eventlistner make all content divs invisible and then make only div visible whose id matches with anchor’s href.

    i.e.  if <a href=“#tab2”>Tab 2</a> clicked
    <div id=“tab2”></div> will be visible.

  • Here, we detect which tab is clicked using cross browser clicked_tab = e.target || e.srcElement
  • So, once clicked tab is found we can get above hash “#tab2” using clicked_tab.getAttribute(‘href’); and find related div to show.

Demo

Share and Enjoy

  • DZone
  • Google Plus
  • LinkedIn
  • Twitter
  • Facebook
  • Email

So, what do you think ?

  •