Skip to main content

Basic Tabs in Javascript


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...

  1. <head>
  2. </head>
  3. <body>
  4. <textarea id='area'></textarea>
  5. </body>
  6. </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'...

  1. <head>
  2. </head>
  3. <body>
  4. <textarea id='area'></textarea>
  5. <button onclick='update(1);'>1</button>
  6. <button onclick='update(2);'>2</button>
  7. <button onclick='update(3);'>3</button>
  8. </body>
  9. </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'...

  1. <head>
  2. var indexid = 0;
  3. var values = new Array("one", "two", "three", "four");
  4. </script>
  5. </head>
  6. <body>
  7. <textarea id='area'></textarea>
  8. <button onclick='update(1);'>1</button>
  9. <button onclick='update(2);'>2</button>
  10. <button onclick='update(3);'>3</button>
  11. </body>
  12. </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...

  1. <head>
  2. var indexid = 0;
  3. var values = new Array("one", "two", "three", "four");
  4. function update(id) {
  5. indexid = id;
  6. document.getElementById('area').value = values[indexid];
  7. }
  8. </script>
  9. </head>
  10. <body>
  11. <textarea id='area'></textarea>
  12. <button onclick='update(1);'>1</button>
  13. <button onclick='update(2);'>2</button>
  14. <button onclick='update(3);'>3</button>
  15. </body>
  16. </html>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.