• 2007-08-02

    简明风格tab页(兼容ie&ff) - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/7320667.html

    下午有学生问到tab页,随手写了一段纯文本代码。存档。

    <s c r i p t>
    function draw(obj)
    {
    if(document.all)
    {
    mytop=obj.offsetParent.offsetTop+obj.offsetTop+obj.offsetHeight;
    myleft=obj.offsetParent.offsetLeft+obj.offsetLeft+1;
    mywidth=parseInt(obj.style.width)-2;
    }
    else
    {
    mytop=obj.offsetTop+obj.offsetHeight;
    myleft=obj.offsetLeft+1;
    mywidth=obj.style.width;
    }
    myheight=1;
    mydiv.style.top=mytop+"px";
    mydiv.style.left=myleft+"px";
    mydiv.style.width=mywidth;
    mydiv.style.height=myheight+"px";
    mydiv.style.background="lightgreen";
    for(i=0;i<document.getElementsByTagName("span").length;i++)
    if(document.getElementsByTagName("span")[i].id.substring(0,3)=="tab")
    document.getElementsByTagName("span")[i].style.font="normal normal 12pt 黑体";
    obj.style.font="italic bold 12pt 黑体";
    for(i=0;i<document.getElementsByTagName("table").length;i++)
    if(document.getElementsByTagName("table")[i].id.substring(0,4)=="show")
    document.getElementsByTagName("table")[i].style.display="none";
    document.getElementById("show"+obj.id.substring(obj.id.length-1,obj.id.length)).style.display="block";
    }
    </sc r i p t>
    <div style="width:700px;wihte-space:nowrap">
    <span id=tab1 style="width:150px;display:-moz-inline-box;background:lightgreen;border-width:1px 1px 0px 1px;border-style:solid;border-color:blue" onclick=draw(this)>
    new books
    </span>&nbsp;
    <span id=tab2 style="width:150px;display:-moz-inline-box;background:lightgreen;border-width:1px 1px 0px 1px;border-style:solid;border-color:blue" onclick=draw(this)>
    hot books
    </span>&nbsp;
    <span id=tab3 style="width:150px;display:-moz-inline-box;background:lightgreen;border-width:1px 1px 0px 1px;border-style:solid;border-color:blue" onclick=draw(this)>
    classical books
    </span>&nbsp;
    <span id=tab4 style="width:150px;display:-moz-inline-box;background:lightgreen;border-width:1px 1px 0px 1px;border-style:solid;border-color:blue" onclick=draw(this)>
    all books
    </span>
    </div>
    <div style="width:700px;background:lightgreen;border:1px solid blue">
    <table cellspacing=10 id=show1>
    <tr><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td></tr>
    <tr><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td></tr>
    <tr><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td><td><u>new book</u></td></tr>
    </table>
    <table cellspacing=10 style="display:none" id=show2>
    <tr><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td></tr>
    <tr><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td></tr>
    <tr><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td><td><u>hot book</u></td></tr>
    </table>
    <table cellspacing=10 style="display:none" id=show3>
    <tr><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td></tr>
    <tr><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td></tr>
    <tr><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td><td><u>classical</u></td></tr>
    </table>
    <table cellspacing=10 style="display:none" id=show4>
    <tr><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td></tr>
    <tr><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td></tr>
    <tr><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td><td><u>all book</u></td></tr>
    </table>
    </div>
    <div id=myline></div>
    <s c r i p t>
    mydiv=document.createElement("div");
    mydiv.style.position="absolute";
    mydiv.style.overflow="hidden";
    document.getElementById("myline").appendChild(mydiv);
    draw(document.getElementById("tab1"));
    </s c r i p t>
    分享到: