HTML tabs with no round trip to server

**d000hg** · 12 January 2010, 19:48

I want to do some stuff similar to this. The problem I see is the pain of designing DIVs you can't view in a visual layout system - like a VB6 app with a single dialog with hundreds of controls, turned on/off on different states.

**NickFitz** · 12 January 2010, 19:53

General principles:

Use semantic HTML;
Use progressive enhancement.

Very quick'n'dirty example.

Goodness: all content is available when JS is disabled; semantic HTML provides useful navigational assistance including for users of assistive technologies such as screen readers; global JS namespace remains unaltered due to encapsulation of code in anonymous self-invoked function expression; all content is readable by spiders, which is good for SEO.

Badness: old-school event handler attachment; manipulation of styles would be better handled by using classes and additional CSS; CSS and JS ought to be in external files.

Hereby placed in the public domain for your edification and entertainment

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tab demo</title>
<style type="text/css">

body {
    font-family: Helvetica, Arial, sans-serif;
}

.js #tabs {
    margin: 0;
    padding: 0;
}

.js .tab {
    list-style-type: none;
    border: 1px solid green;
    padding: 0.5em 1em;
    float: left;
}



.js .tab_content {
    clear: left;
    border: 1px solid green;
    padding: 1em;
}

</style>
</head>
<body>
<h1>Tab demo</h1>
<ol id="tabs">
    <li class="tab"><a href="#foo" rel="tab">Foo</a></li>
    <li class="tab"><a href="#bar" rel="tab">Bar</a></li>
    <li class="tab"><a href="#baz" rel="tab">Baz</a></li>
</ol>
<div id="foo" class="tab_content">
    <h2>Foo stuff</h2>
    <p>This is stuff about foo.</p>
</div>
<div id="bar" class="tab_content">
    <h2>Bar stuff</h2>
    <p>This is stuff about bar.</p>
</div>
<div id="baz" class="tab_content">
    <h2>Baz stuff</h2>
    <p>This is stuff about baz.</p>
</div>
<script type="text/javascript">
(function() {
    var currentContent;
    function makeOnclickHandler(tab) {
        return function(e) {
            if (currentContent) {
                currentContent.style.display = "none";
            }
            tab.content.style.display = "block";
            currentContent = tab.content;
            return false;
        }
    }

    document.body.className += " js";
    var potentialTabs = document.getElementsByTagName("li");
    var tabs = [];
    for (var i = 0, count = potentialTabs.length; i < count; i++) {
        if (/\btab\b/.test(potentialTabs[i].className)) {
            tabs[tabs.length] = potentialTabs[i];
        }
    }

    for (var i = 0, count = tabs.length; i < count; i++) {
        var tab = tabs[i];
        tab = tabs[i] = {
            element: tab
        };
        var a = tab.element.getElementsByTagName("a")[0];
        var href = a.href;
        var contentId = href.substring(href.lastIndexOf("#") + 1);
        tab.content = document.getElementById(contentId);
        tab.content.style.display = "none";
        tab.element.onclick = makeOnclickHandler(tab);
    }
    tabs[0].element.onclick();    
})();


</script>
</body>
</html>

EDIT: a few changes to the CSS and JS are posted below...

**NickFitz** · 12 January 2010, 19:56

Originally posted by suityou01 View Post

Seems to work in FF so should be good in IE.

Bad assumption

IE has ways of screwing things up that we wot not of. Some bugs are actually worse in IE7 than they were in IE6. You should be all right for something straightforward like this, though.

**suityou01** · 12 January 2010, 20:00

Originally posted by Zippy View Post

OK. Show and hide divs is good. You can change styles for the tabs using Jscript (but FF and IE are different)
I'll confess that I don't know what the big problem is here. Sorry

Who said anything about a big problem? I just wanted a steer. Got one. Did the code. All is well. Thanks for your help all.

**NickFitz** · 12 January 2010, 20:17

Originally posted by NickFitz View Post

stuff...

Updated version - tidies up a couple of things and highlights the active tab. Only changes are to the CSS:

Code:

body {
    font-family: Helvetica, Arial, sans-serif;
}

.js #tabs {
    margin: 0;
    padding: 0;
}

.js .tab {
    list-style-type: none;
    border: 3px solid green;
    padding: 0.5em 1em;
    float: left;
}

.js .active {
    border-color: #f0f;
}

.js .active a {
    color: #f0f;
}

.js .tab_content {
    clear: left;
    border: 1px solid green;
    padding: 1em;
}

and the JS:

Code:

(function() {
    var currentTab = null;

    function makeOnclickHandler(tab) {
        return function(e) {
            if (currentTab) {
                currentTab.content.style.display = "none";
                currentTab.element.className = currentTab.element.className.replace(/\bactive\b/, "");
            }
            tab.content.style.display = "block";
            tab.element.className += " active";
            currentTab = tab;
            return false;
        }
    }

    document.body.className += " js";
    var potentialTabs = document.getElementsByTagName("li");
    var tabs = [];
    for (var i = 0, count = potentialTabs.length; i < count; i++) {
        if (/\btab\b/.test(potentialTabs[i].className)) {
            tabs[tabs.length] = potentialTabs[i];
        }
    }

    for (var i = 0, count = tabs.length; i < count; i++) {
        var tab = tabs[i];
        tab = tabs[i] = {
            element: tab
        };
        var a = tab.element.getElementsByTagName("a")[0];
        var href = a.href;
        var contentId = href.substring(href.lastIndexOf("#") + 1);
        tab.content = document.getElementById(contentId);
        tab.content.style.display = "none";
        tab.element.onclick = makeOnclickHandler(tab);
    }
    tabs[0].element.onclick();    
})();

HTML tabs with no round trip to server

Comment

Comment

Comment

Comment

Comment

Partners

Advertisers

Contractor Services

CUK News

HTML tabs with no round trip to server

Comment

Comment

Comment

Comment

Comment

Partners

Advertisers

Contractor Services

CUK News

Tag Cloud