JavaScript Technique: Tabbed Web Pages

Last reviewed/updated: 25 May 2016 | Published: 21 Aug 2014 | Status: Active
Web browser support: Internet Explorer 10+, Edge 12+, Firefox 6+, Chrome 30+, Opera 17+

1. Introduction

Tabbed web pages with JavaScript is a technique for providing the tab HTML and for dynamically changing the style of the selected/unselected tabs. Some notes on this example:

  • Each tab is a traditional hyperlink with an a element and href attribute.
  • Each tab hyperlink loads a different HTML document.
  • The tab HTML is located in an external .js JavaScript file, not in the .html HTML documents. Placing sitewide content in a single location, such as in an external .js JavaScript file, facilitates coding, particularly code editing, and is well suited for sitewide header, navigational, and/or footer content. The tabs can be considered both sitewide header and navigational content. Additional sitewide header and navigational content, such as the web site name/logo, search box, and additional tabs, can be added to the external .js JavaScript file.
  • There are three tabs. To add tabs, simply follow the established patterns and, for each tab; 1.) add a tab hyperlink to the tabbed_web_pages_header_html.js file, and 2.) create a different HTML document.
  • The tabs are floated left. To float the tabs right; 1.) change the CSS source code lines 1 - 8 to .tab-hyperlink { float: right; background-color: #888; color: #fff; text-decoration: none; margin-left: 5px; padding: 10px; }, and 2.) reverse the order of the tab hyperlinks in the tabbed_web_pages_header_html.js file.
  • The tabs, including the highlighted tab, are styled using CSS. However, because the tab HTML is located in a single file, tab highlighting cannot be hard coded into the HTML and, therefore, must be done dynamically. A simple JavaScript method dynamically highlights the appropriate tab.
  • The HTML element style attribute is exposed on the DOM as the JavaScript style object. The JavaScript style object gets/sets the HTML element style attribute value from/on the DOM. Specifically, assigning the JavaScript style object to a JavaScript variable gets the HTML element style attribute value from the DOM, and assigning a value to the JavaScript style object sets the HTML element style attribute value on the DOM.
  • The loading of an HTML document, not the clicking of a tab, calls the JavaScript method that highlights the appropriate tab. Associating the JavaScript call with the loading of an HTML document means the HTML documents can link to one another directly, thereby bypassing the tabs, and the appropriate tab is highlighted.

1.1. Demonstration

Demonstration: JavaScript Technique: Tabbed Web Pages (learnwebcoding.com).

1.2. Web Browser Support

Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.

1.3. How To Try This Example On Your Computer

To try this example on your computer:

  1. Download the following source files to the same drive or folder on your computer:
  2. Double click any of the .html files.

1.4. Abbreviations

  • IE = Internet Explorer.
  • ED = Edge = EdgeHTML rendering engine (ED12+) and/or Edge browser (ED20+).
  • FF = Firefox.
  • SF = Safari.
  • CH = Chrome.
  • OP = Opera.

2. Tabbed Web Pages

2.1. HTML Source Code And Notes

HTML source code: tabbed_web_page_1.html (learnwebcoding.com):

1     <!DOCTYPE html>
2     <html lang="en">
3      <head>
4       <title>JavaScript Technique: Tabbed Web Pages</title>
5       <meta charset="UTF-8" />
6       <link rel="stylesheet" type="text/css" href="tabbed_web_pages.css" />
7       <script src="tabbed_web_pages_javascript.js"></script>
8      </head>
9      <body>
10      <header>
11       <script src="tabbed_web_pages_header_html.js"></script>
12       <script>TabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab("1");</script>
13      </header>
14      <div class="wrapper">
15       <p>Tabbed web page 1 content.</p>
16       <p>Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.</p>
17      </div>
18     </body>
19    </html>

HTML source code notes:

  • Does not provide the tab HTML.
  • Loaded when the Tabbed Web Page 1 tab is clicked.
  • Line 11: Loads the tabbed_web_pages_header_html.js Javascript file, which provides the header HTML on the DOM. The header HTML is an h2 heading and the tab HTML.
  • Line 12: Calls the TabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab() method and passes it a value. The value passed into the TabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab() method indicates which HTML document is currently loaded/tab was clicked and, therefore, indicates the tab that needs to be highlighted. When tabbed_web_page_1.html is loaded, the Tabbed Web Page 1 tab needs to be highlighted, and, therefore, the "1" value (as in id="tab1") is passed.
  • Lines 14 - 17: Optional content. Substitute your own content here.
  • Identical to tabbed_web_page_2.html and tabbed_web_page_3.html with the following exceptions:
    • Line 12: Passes the "1" value.
    • Line 15: Displays Tabbed Web Page 1.

HTML source code: tabbed_web_page_2.html (learnwebcoding.com):

1     <!DOCTYPE html>
2     <html lang="en">
3      <head>
4       <title>JavaScript Technique: Tabbed Web Pages</title>
5       <meta charset="UTF-8" />
6       <link rel="stylesheet" type="text/css" href="tabbed_web_pages.css" />
7       <script src="tabbed_web_pages_javascript.js"></script>
8      </head>
9      <body>
10      <header>
11       <script src="tabbed_web_pages_header_html.js"></script>
12       <script>TabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab("2");</script>
13      </header>
14      <div class="wrapper">
15       <p>Tabbed web page 2 content.</p>
16       <p>Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.</p>
17      </div>
18     </body>
19    </html>

HTML source code notes:

  • Does not provide the tab HTML.
  • Loaded when the Tabbed Web Page 2 tab is clicked.
  • Line 11: Loads the tabbed_web_pages_header_html.js file, which provides the header HTML on the DOM. The header HTML is an h2 heading and the tab HTML.
  • Line 12: Calls the TabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab() method and passes it a value. The value passed into the TabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab() method indicates which HTML document is currently loaded/tab was clicked and, therefore, indicates the tab that needs to be highlighted. When tabbed_web_page_2.html is loaded, the Tabbed Web Page 2 tab needs to be highlighted, and, therefore, the "2" value (as in id="tab2") is passed.
  • Lines 14 - 17: Optional content. Substitute your own content here.
  • Identical to tabbed_web_page_1.html and tabbed_web_page_3.html with the following exceptions:
    • Line 12: Passes the "2" value.
    • Line 15: Displays Tabbed Web Page 2.

HTML source code: tabbed_web_page_3.html (learnwebcoding.com):

1     <!DOCTYPE html>
2     <html lang="en">
3      <head>
4       <title>JavaScript Technique: Tabbed Web Pages</title>
5       <meta charset="UTF-8" />
6       <link rel="stylesheet" type="text/css" href="tabbed_web_pages.css" />
7       <script src="tabbed_web_pages_javascript.js"></script>
8      </head>
9      <body>
10      <header>
11       <script src="tabbed_web_pages_header_html.js"></script>
12       <script>TabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab("3");</script>
13      </header>
14      <div class="wrapper">
15       <p>Tabbed web page 3 content.</p>
16       <p>Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.</p>
17      </div>
18     </body>
19    </html>

HTML source code notes:

  • Does not provide the tab HTML.
  • Loaded when the Tabbed Web Page 3 tab is clicked.
  • Line 11: Loads the tabbed_web_pages_header_html.js file, which provides the header HTML on the DOM. The header HTML is an h2 heading and the tab HTML.
  • Line 12: Calls the TabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab() method and passes it a value. The value passed into the TabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab() method indicates which HTML document is currently loaded/tab was clicked and, therefore, indicates the tab that needs to be highlighted. When tabbed_web_page_3.html is loaded, the Tabbed Web Page 3 tab needs to be highlighted, and, therefore, the "3" value (as in id="tab3") is passed.
  • Lines 14 - 17: Optional content. Substitute your own content here.
  • Identical to tabbed_web_page_1.html and tabbed_web_page_2.html with the following exceptions:
    • Line 12: Passes the "3" value.
    • Line 15: Displays Tabbed Web Page 3.

2.2. CSS Source Code And Notes

CSS source code: tabbed_web_pages.css (learnwebcoding.com):

1     .tab-hyperlink {
2       float: left;
3       background-color: #888;
4       color: #fff;
5       text-decoration: none;
6       margin-right: 5px;
7       padding: 10px;
8     }
9     .tab-hyperlink:hover {
10      text-decoration: underline;
11    }
12    .wrapper {
13      clear: both;
14      border: 1px solid #ccc;
15      padding: 0 10px;
16    }

CSS source code notes:

  • Line 6: Creates the space between the tabs.

2.3. JavaScript Source Code And Notes

JavaScript source code: tabbed_web_pages_javascript.js (learnwebcoding.com):

1    var TabbedWebPagesHighlightTabUtil = {
2     tabbedWebPagesHighlightTab: function(tabToHighlight){
3      var tabAnchorElementReference = document.getElementById("tab" + tabToHighlight);
4      tabAnchorElementReference.style.backgroundColor = "#00f";
5     }
6    };

JavaScript source code notes:

  • Line 1: Defines TabbedWebPagesHighlightTabUtil as an object literal.
  • Line 2: Defines the tabbedWebPagesHighlightTab() function as a method of the TabbedWebPagesHighlightTabUtil object.
  • Line 2: Defines tabToHighlight as an argument of the TabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab() method. The value passed into the TabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab() method is assigned to tabToHighlight. tabToHighlight is a local variable.
  • Line 3: Gets a reference to the element with the id="tab" + tabToHighlight attribute, and assigns the reference to tabAnchorElementReference. tabAnchorElementReference is a local variable.
  • Line 4: Assigns backgroundColor = "#00f" to the JavaScript tabAnchorElementReference.style object, which sets style="background-color:#00f" on the DOM for the HTML element with the id="tab" + tabToHighlight attribute. This constitutes a CSS inline style and makes the background color blue (#00f) for the HTML element with the id="tab" + tabToHighlight attribute.

JavaScript source code: tabbed_web_pages_header_html.js (learnwebcoding.com):

1    document.write(
2     '<h2>JavaScript Technique: Tabbed Web Pages</h2>' +
3     '<div>' +
4      '<a href="tabbed_web_page_1.html" id="tab1" class="tab-hyperlink">Tabbed Web Page 1</a>' +
5      '<a href="tabbed_web_page_2.html" id="tab2" class="tab-hyperlink">Tabbed Web Page 2</a>' +
6      '<a href="tabbed_web_page_3.html" id="tab3" class="tab-hyperlink">Tabbed Web Page 3</a>' +
7     '</div>'
8    );

JavaScript source code notes:

  • Line 1: Uses the JavaScript document.write() method to provide the header HTML on the DOM, The header HTML is an h2 heading and the tab HTML.
  • Lines 3 - 7: Provides the tab HTML. Each tab is a traditional hyperlink using the a element with the href attribute. Each tab hyperlink loads a different HTML document.
  • Lines 4 - 6: An element id attribute specifies a selector that serves as a unique identifier for the element. Specifically, the value assigned to the element id attribute is the element unique identifier. In this example, each a element id attribute is assigned a unique value. Therefore, the unique values are the a element unique identifiers.

3. Resources And Additional Information