Basic Tabs in Javascript

Submitted by Yorkiebar on Thursday, April 24, 2014 - 11:33.
Introduction: This tutorial is on how to create simple, small tabs in Javascript. When I say 'small tabs', I mean that this shouldn't be used for tabs holding large amounts of content. HTML: First we want to create a text area in which we are going to be holding the tab content...
  2.         <head>
  3.         </head>
  4.         <body>
  5.                 <textarea id='area'></textarea>
  6.         </body>
  7. </html>
Then we want a few buttons to act as options to change the current tabs. We simply parse the tab number to the function 'update'...
  2.         <head>
  3.         </head>
  4.         <body>
  5.                 <textarea id='area'></textarea>
  6.                 <button onclick='update(1);'>1</button>
  7.                 <button onclick='update(2);'>2</button>
  8.                 <button onclick='update(3);'>3</button>
  9.         </body>
  10. </html>
Javascript: Now we want to create a couple of Javascript variables. First we want an integer named 'indexid' to hold the current tab index/number. And we also want an array of strings which contain the tabs content, we'll name this 'values'...
  2.         <head>
  3.                 <script>
  4.                         var indexid = 0;
  5.                         var values = new Array("one", "two", "three", "four");
  6.                 </script>
  7.         </head>
  8.         <body>
  9.                 <textarea id='area'></textarea>
  10.                 <button onclick='update(1);'>1</button>
  11.                 <button onclick='update(2);'>2</button>
  12.                 <button onclick='update(3);'>3</button>
  13.         </body>
  14. </html>
Finally we want to make our 'update' function. We want to accept one parameter which is the new tab id. We then set the variable holding the current tab id ('indexid') to the new 'id' parsed value, and update the text of our textarea with the id of 'area' with the new tabs content - we simply pull this from our 'values' string array at the element index of the parsed 'id' value to the function...
  2.         <head>
  3.                 <script>
  4.                         var indexid = 0;
  5.                         var values = new Array("one", "two", "three", "four");
  6.                         function update(id) {
  7.                                 indexid = id;
  8.                                 document.getElementById('area').value = values[indexid];
  9.                         }
  10.                 </script>
  11.         </head>
  12.         <body>
  13.                 <textarea id='area'></textarea>
  14.                 <button onclick='update(1);'>1</button>
  15.                 <button onclick='update(2);'>2</button>
  16.                 <button onclick='update(3);'>3</button>
  17.         </body>
  18. </html>
Tags
Javascript
basic
Tabs
Content Tabs
onclick mouse event

Add new comment

About text formats
  • 31 views