{"id":2058,"date":"2016-11-07T18:24:25","date_gmt":"2016-11-07T18:24:25","guid":{"rendered":"http:\/\/cssreset.com\/?p=2058"},"modified":"2016-11-07T18:26:51","modified_gmt":"2016-11-07T18:26:51","slug":"create-html-tabs-using-css-and-javascript","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/create-html-tabs-using-css-and-javascript\/","title":{"rendered":"Create HTML Tabs Using CSS and JavaScript"},"content":{"rendered":"

Creating HTML tabs for your web pages is actually fairly easy to do. It requires a mostly HTML and CSS, and a little bit of jQuery to help to switch between tabs. Tabs are perfect to use when you want to present a lot of information on one page in an organized way.<\/p>\n

To start, you’ll need to get your HTML set up. The tabs themselves will be <li> elements, while the tab content will be made up of divs.<\/p>\n

<div class=”tabs”>
\n<ul class=”tab-links”>
\n<li class=”active”><a href=”#tab1″>Pizza<\/a><\/li>
\n<li><a href=”#tab2″>Ice Cream<\/a><\/li>
\n<li><a href=”#tab3″>Burgers<\/a><\/li>
\n<li><a href=”#tab4″>Burritos<\/a><\/li>
\n<\/ul><\/p>\n

<div class=”tab-content”>
\n<div id=”tab1″ class=”tab active”>
\n<p>PIZZA<\/p>
\n<\/div><\/p>\n

<div id=”tab2″ class=”tab”>
\n<p>ICE CREAM<\/p>
\n<\/div><\/p>\n

<div id=”tab3″ class=”tab”>
\n<p>BURGERS<\/p>
\n<\/div><\/p>\n

<div id=”tab4″ class=”tab”>
\n<p>BURRITOS<\/p>
\n<\/div>
\n<\/div><\/p>\n

Your styling should then look something like this:<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. .tabs<\/span> {<\/span><\/div><\/li>\n
  2. width<\/span>:<\/span>60%<\/span>;<\/span><\/div><\/li>\n
  3. display<\/span>:inline-<\/span>block;<\/span><\/div><\/li>\n
  4. }<\/span><\/div><\/li>\n
  5.  <\/div><\/li>\n
  6. .tab-links{<\/span><\/div><\/li>\n
  7. margin-bottom<\/span>:<\/span> 0<\/span>;<\/span><\/div><\/li>\n
  8. margin-left<\/span>:<\/span> 0<\/span>;<\/span><\/div><\/li>\n
  9. }<\/span><\/div><\/li>\n
  10. .tab-links<\/span>:after <\/span>{<\/span><\/div><\/li>\n
  11. display<\/span>:<\/span>block<\/span>;<\/span><\/div><\/li>\n
  12. clear<\/span>:<\/span>both<\/span>;<\/span><\/div><\/li>\n
  13. content<\/span>:<\/span>''<\/span>;<\/span><\/div><\/li>\n
  14. }<\/span><\/div><\/li>\n
  15. .tab-links<\/span> li {<\/span><\/div><\/li>\n
  16. margin<\/span>:<\/span>0px<\/span> 5px<\/span>;<\/span><\/div><\/li>\n
  17. float<\/span>:<\/span>left<\/span>;<\/span><\/div><\/li>\n
  18. list-style<\/span>:<\/span>none<\/span>;<\/span><\/div><\/li>\n
  19. }<\/span><\/div><\/li>\n
  20.  <\/div><\/li>\n
  21. .tab-links<\/span> a {<\/span><\/div><\/li>\n
  22. padding<\/span>:<\/span>9px<\/span> 15px<\/span>;<\/span><\/div><\/li>\n
  23. display<\/span>:inline-<\/span>block;<\/span><\/div><\/li>\n
  24. border-radius<\/span>:<\/span>3px<\/span> 3px<\/span> 0px<\/span> 0px<\/span>;<\/span><\/div><\/li>\n
  25. background<\/span>:<\/span>#e34a3e<\/span>;<\/span><\/div><\/li>\n
  26. font-size<\/span>:<\/span>16px<\/span><\/div><\/li>\n
  27. font-weight<\/span>:<\/span>600<\/span>;<\/span><\/div><\/li>\n
  28. color<\/span>:<\/span>#444<\/span>;<\/span><\/div><\/li>\n
  29. transition:all <\/span>linear 0.15s;<\/span><\/div><\/li>\n
  30. }<\/span><\/div><\/li>\n
  31.  <\/div><\/li>\n
  32. .tab-links<\/span> a:hover <\/span>{<\/span><\/div><\/li>\n
  33. background<\/span>:<\/span>#f67f76<\/span>;<\/span><\/div><\/li>\n
  34. text-decoration<\/span>:<\/span>none<\/span>;<\/span><\/div><\/li>\n
  35. }<\/span><\/div><\/li>\n
  36.  <\/div><\/li>\n
  37. li.active<\/span> a,<\/span> li.active<\/span> a:hover <\/span>{<\/span><\/div><\/li>\n
  38. background<\/span>:<\/span>#fff<\/span>;<\/span><\/div><\/li>\n
  39. color<\/span>:<\/span>#4c4c4c<\/span>;<\/span><\/div><\/li>\n
  40. }<\/span><\/div><\/li>\n
  41.  <\/div><\/li>\n
  42. .tab-content<\/span> {<\/span><\/div><\/li>\n
  43. padding<\/span>:<\/span>15px<\/span>;<\/span><\/div><\/li>\n
  44. border-radius<\/span>:<\/span>3px<\/span>;<\/span><\/div><\/li>\n
  45. box-shadow:<\/span>-1px<\/span> 1px<\/span> 1px<\/span> rgba(<\/span>0<\/span>,<\/span>0<\/span>,<\/span>0<\/span>,<\/span>0.15<\/span>)<\/span>;<\/span><\/div><\/li>\n
  46. background<\/span>:<\/span>#fff<\/span>;<\/span><\/div><\/li>\n
  47. }<\/span><\/div><\/li>\n
  48. .tab<\/span> {<\/span><\/div><\/li>\n
  49. display<\/span>:<\/span>none<\/span>;<\/span><\/div><\/li>\n
  50. }<\/span><\/div><\/li>\n
  51.  <\/div><\/li>\n
  52. .tab<\/span>.active<\/span> {<\/span><\/div><\/li>\n
  53. display<\/span>:<\/span>block<\/span>;<\/span><\/div><\/li>\n
  54. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    You may notice that not much CSS manipulation at all is required to get the tabs to look like tabs. In terms of styling choices, you can decide to style your tabs however you look. Here’s what ours look like:<\/p>\n

    \"Screen<\/p>\n

    In order to get the tabs to work like tabs, however, you’ll need to add a little jQuery:<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    javascript<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. jQuery(document).ready(function() {<\/div><\/li>\n
    2. jQuery('.tabs .tab-links a').on('click', function(e) {<\/div><\/li>\n
    3. var currentAttrValue = jQuery(this).attr('href');<\/div><\/li>\n
    4.  <\/div><\/li>\n
    5. jQuery('.tabs ' + currentAttrValue).show().siblings().hide();<\/div><\/li>\n
    6.  <\/div><\/li>\n
    7. jQuery(this).parent('li').addClass('active').siblings().removeClass('active');<\/div><\/li>\n
    8.  <\/div><\/li>\n
    9. e.preventDefault();<\/div><\/li>\n
    10. });<\/div><\/li>\n
    11. });<\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      The .show() and .hide() methods make it possible for one tab to be active (shown) while the rest are hidden. Play around with the code and customize it to your liking!<\/p>\n

      \"Screen<\/p>\n

      Share and Enjoy !<\/h3>
      0<\/span><\/span>Shares<\/small><\/div>
      <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

      Creating HTML tabs for your web pages is actually fairly easy to do. It requires a mostly HTML and CSS, and a little bit of jQuery to help to switch between tabs. Tabs are perfect to use when you want […]<\/p>\n

      Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2074,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2058"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2058"}],"version-history":[{"count":5,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2058\/revisions"}],"predecessor-version":[{"id":2082,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2058\/revisions\/2082"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2074"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}