JavaScript Technique: Tabbed Web Pages
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 andhref
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 JavaScriptstyle
object. The JavaScriptstyle
object gets/sets the HTML elementstyle
attribute value from/on the DOM. Specifically, assigning the JavaScriptstyle
object to a JavaScript variable gets the HTML elementstyle
attribute value from the DOM, and assigning a value to the JavaScriptstyle
object sets the HTML elementstyle
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:
- Download the following source files to the same drive or folder on your computer:
- Double click any of the .html files.
1.4. Abbreviations
- IE = Internet Explorer.
- ED = Edge Legacy 12 - 18 (EdgeHTML based) and Edge 79+ (Chromium based).
- 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):
<!DOCTYPE html> <html lang="en"> <head> <title>JavaScript Technique: Tabbed Web Pages</title> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="tabbed_web_pages.css" /> <script src="tabbed_web_pages_javascript.js"></script> </head> <body> <header> <script src="tabbed_web_pages_header_html.js"></script> <script>TabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab("1");</script> </header> <div class="wrapper"> <p>Tabbed web page 1 content.</p> <p>Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.</p> </div> </body> </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 theTabbedWebPagesHighlightTabUtil.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 inid="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.
- Line 12: Passes the
HTML source code: tabbed_web_page_2.html (learnwebcoding.com):
<!DOCTYPE html> <html lang="en"> <head> <title>JavaScript Technique: Tabbed Web Pages</title> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="tabbed_web_pages.css" /> <script src="tabbed_web_pages_javascript.js"></script> </head> <body> <header> <script src="tabbed_web_pages_header_html.js"></script> <script>TabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab("2");</script> </header> <div class="wrapper"> <p>Tabbed web page 2 content.</p> <p>Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.</p> </div> </body> </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 theTabbedWebPagesHighlightTabUtil.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 inid="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.
- Line 12: Passes the
HTML source code: tabbed_web_page_3.html (learnwebcoding.com):
<!DOCTYPE html> <html lang="en"> <head> <title>JavaScript Technique: Tabbed Web Pages</title> <meta charset="UTF-8" /> <link rel="stylesheet" type="text/css" href="tabbed_web_pages.css" /> <script src="tabbed_web_pages_javascript.js"></script> </head> <body> <header> <script src="tabbed_web_pages_header_html.js"></script> <script>TabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab("3");</script> </header> <div class="wrapper"> <p>Tabbed web page 3 content.</p> <p>Web browser support: IE6+, ED12+, FF1.5+, SF3.1+, CH2+, OP7.50+.</p> </div> </body> </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 theTabbedWebPagesHighlightTabUtil.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 inid="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.
- Line 12: Passes the
2.2. CSS Source Code And Notes
CSS source code: tabbed_web_pages.css (learnwebcoding.com):
.tab-hyperlink { float: left; background-color: #888; color: #fff; text-decoration: none; margin-right: 5px; padding: 10px; } .tab-hyperlink:hover { text-decoration: underline; } .wrapper { clear: both; border: 1px solid #ccc; padding: 0 10px; }
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):
var TabbedWebPagesHighlightTabUtil = { tabbedWebPagesHighlightTab: function(tabToHighlight){ var tabAnchorElementReference = document.getElementById("tab" + tabToHighlight); tabAnchorElementReference.style.backgroundColor = "#00f"; } };
JavaScript source code notes:
- Line 1: Defines
TabbedWebPagesHighlightTabUtil
as an object literal. - Line 2: Defines the
tabbedWebPagesHighlightTab()
function as a method of theTabbedWebPagesHighlightTabUtil
object. - Line 2: Defines
tabToHighlight
as an argument of theTabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab()
method. The value passed into theTabbedWebPagesHighlightTabUtil.tabbedWebPagesHighlightTab()
method is assigned totabToHighlight
.tabToHighlight
is a local variable. - Line 3: Gets a reference to the element with the
id="tab" + tabToHighlight
attribute, and assigns the reference totabAnchorElementReference
.tabAnchorElementReference
is a local variable. - Line 4: Assigns
backgroundColor = "#00f"
to the JavaScripttabAnchorElementReference.style
object, which setsstyle="background-color:#00f"
on the DOM for the HTML element with theid="tab" + tabToHighlight
attribute. This constitutes a CSS inline style and makes the background color blue (#00f) for the HTML element with theid="tab" + tabToHighlight
attribute.
JavaScript source code: tabbed_web_pages_header_html.js (learnwebcoding.com):
document.write( '<h2>JavaScript Technique: Tabbed Web Pages</h2>' + '<div>' + '<a href="tabbed_web_page_1.html" id="tab1" class="tab-hyperlink">Tabbed Web Page 1</a>' + '<a href="tabbed_web_page_2.html" id="tab2" class="tab-hyperlink">Tabbed Web Page 2</a>' + '<a href="tabbed_web_page_3.html" id="tab3" class="tab-hyperlink">Tabbed Web Page 3</a>' + '</div>' );
JavaScript source code notes:
- Line 1: Uses the JavaScript
document.write()
method to provide the header HTML on the DOM, The header HTML is anh2
heading and the tab HTML. - Lines 3 - 7: Provides the tab HTML. Each tab is a traditional hyperlink using the
a
element with thehref
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 elementid
attribute is the element unique identifier. In this example, eacha
elementid
attribute is assigned a unique value. Therefore, the unique values are thea
element unique identifiers.