Tabbed Menu Sample

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
    <head>
        <style type="text/css">
            .topmenuitem {
            background: #80A080;
            border-top-left-radius: 20% 100%;
            border-top-right-radius: 20% 100%;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            text-align: center;
            cursor: pointer;
            }
            .selected {
            background: #80B080;
            cursor: default;
            }
            table {
            border-spacing: 0;
            }
            .info {
            background: #80B080;
            text-align: center;
            }
            .tab {
            display: none;
            }
            .openedtab {
            display: block;
            }
        </style>
        <title>Tabbed Menu Sample</title>
        <script type="text/javascript">
            document.addEventListener('click', function(e) {
                e = e || window.event;
                var target = e.target || e.srcElement;
                var menuitems, tabs;
                var i;
                if(target.className.indexOf("topmenuitem")!=-1 && target.className.indexOf("selected")==-1)
                {
                    menuitems = document.getElementsByClassName("topmenuitem");
                    tabs = document.getElementsByClassName("tab");
                    for(i=0; i<tabs.length; ++i)
                    {
                        if(menuitems[i]==target)
                        {
                            tabs[i].className += " openedtab";
                            menuitems[i].className += " selected";
                        }
                        else
                        {
                            tabs[i].className = "tab";
                            menuitems[i].className = menuitems[i].className.replace(" selected", "");
                        }
                    }
                }
            }, false);
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td class="topmenuitem selected">
                    Tab&nbsp;1
                </td>
                <td class="topmenuitem">
                    Tab&nbsp;2
                </td>
            </tr>
            <tr>
                <td colspan=2 class="info">
                    <h1>Hello, World!</h1>
                </td>
            </tr>
        </table>
        <div class="tab openedtab">
            Tab 1 Content
        </div>
        <div class="tab">
            Tab 2 Content
        </div>
    </body>
</html>