我这个不知道什么时候从国外网站上淘过来的,很好用,支持W3C,可以用div+css来实现的东东。

一个很好用的TabMenu(转)点击下载此文件

他的JS如下:

程序代码: [ 复制代码到剪贴板 ]
}

else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            setupAllTabs();
        };
    }
    else 
        window.onload = setupAllTabs;
}


他的CSS书写好像不是很符合规则,我这里贴一个出来

程序代码: [ 复制代码到剪贴板 ]
.dynamic-tab-pane-control.tab-pane {
    position:    relative;
    width:        100%;
}

.dynamic-tab-pane-control .tab-row .tab {
    font:            Menu;
    cursor:            Default;
    display:        inline;
    margin:            1px -1px 1px 2px;
    float:            left;
    padding:        2px 5px 3px 5px;
    background:        ActiveBorder;
    border:            0;/* 1px solid; */
    border-color:    ThreeDHighlight ThreeDDarkShadow
                    ThreeDDarkShadow ThreeDHighlight;
    border-bottom:    0;
    z-index:        1;
    white-space:    nowrap;
    position:        relative;
    top:            0;
}

.dynamic-tab-pane-control .tab-row .tab.selected {
    background:        ThreeDHighlight !important;
    border:            1px solid ThreeDDarkShadow;
    border-bottom:    0;
    z-index:        3;
    padding:        2px 6px 4px 6px;
    margin:            1px -3px -3px 0px;
    top:            -2px;
}

.dynamic-tab-pane-control .tab-row .tab a {
    font:                Menu;
    color:                WindowText;
    text-decoration:    none;
    cursor:                default;
}

.dynamic-tab-pane-control .tab-row .tab.hover {
    background:    Highlight;
}

.dynamic-tab-pane-control .tab-page {
    clear:            both;
    border:            1px solid ThreeDDarkShadow;
    background:        ThreeDHighlight;
    z-index:        2;
    position:        relative;
    top:            -2px;
    color:            WindowText;
    font:            Message-Box;
    padding:        10px;
    
    height:            200px;
}

.dynamic-tab-pane-control .tab-row {
    z-index:        1;
    white-space:    nowrap;
}


最后是一个demo.html


程序代码: [ 复制代码到剪贴板 ]
//<![CDATA[

setupAllTabs();

//]]>
</script>

</body>
</html>





最后,还是打包给大家下载吧,好东西大家一起分享与研究 一个很好用的TabMenu(转)

相关文章: