How to Add Tabs in Internet Explorer 7 With Javascript

Creating Tabs in Internet Explorer 7

According to Tony Schreiner, a developer on the Internet Explorer team, the philosophy behind tabbed browsing is to keep users in control of their experience. Even though you cannot add tabs to the Internet Explorer 7 user interface with JavaScript, you can add tabs to web pages in Internet Explorer 7.

Things You'll Need

• Internet Explorer 7

Instructions

Enable JavaScript in Internet Explorer 7

1. Open Internet Explorer 7 and click the "Tools" menu.

2. Select "Internet Options."

3. Click the "Security" tab.

4. Select the "Internet" globe icon to open Internet zone settings.

5. Click the "Custom level" button. The "Security Settings" dialog box appears.

6. Scroll to the "Scripting" section near the bottom of the list. Select the "Enable" radio button for the "Active Scripting" option.

7. Click "OK." Click "OK" again.

Create Tabs in a Web Page for Internet Explorer 7

1. Create an HTML file to produce the tabs. Use <div> tags with a class=tabcontent attribute and unique id for reference to create the structure and content of each tab. The code looks something like this:

   <div class="tabContent" id="about">

   Substitute your actual unique id for "about."

2. Establish links within an unordered list to create the titles for each tab. Use an individual list item for each tab title. The code might look something like this:

   <ul id="tabs">
   <li><a href="#about">About X</a></li>
   <li><a href="#samples">Samples of X</a></li>
   <li><a href="#usage">Using X</a></li>
   </ul>

   Substitute your actual list items and titles, of course.

3. Create a CSS file to determine what the tabs will look like. The CSS determines the font style, font size, and colors of the tab and tab content areas (see Resources for tutorial and examples).

4. Create the JavaScript to activate the tabs. The tabs are activated by attaching a showTab() event handler to each tab, then hiding all but the first tab. That way the front tab shows its content while the others are hidden behind it. Four JavaScript functions are used to activate the tabs.

   init() Sets the tabs up when the page loads.

   showTab() Displays the contents of the selected tab and hides the others behind it.

   getFirstChildWithTagName() Helps the init() function retrieve the link element inside each tab list item.

   getHash() Helps the init() function extract the tab content id referenced in a tab link.

5. Put the HTML, CSS, and JavaScript elements together to begin working with tabs in Internet Explorer 7.

Tips & Warnings

• Use an individual <div> tag, class=tabcontent attribute, and unique id for each tab.

• Use the CSS to distinguish between selected tabs and unselected tabs.

References

• IE Blog: Tabbed Browsing Implementation
• How to Enable Scripting in Your Browser
• JavaScript Tabs - Create Tabbed Web Pages Easily

Resources

• Tab Content Script (v. 2.2)
• JavaScript Tutorial