• 2007-08-03

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

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

    学生提出风格的变换,于是另写一段代码。存档。

    <s c r i p t>
    function draw(obj)
    {
    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 黑体";
    document.getElementsByTagName("span")[i].style.borderWidth="1px 1px 0px 1px";
    document.getElementsByTagName("span")[i].style.borderStyle="solid";
    document.getElementsByTagName("span")[i].style.borderColor="lightseagreen";
    document.getElementsByTagName("span")[i].style.background="lightseagreen";
    }
    obj.style.font="italic bold 12pt 黑体";
    obj.style.borderWidth="1px 1px 0px 1px";
    obj.style.borderStyle="solid";
    obj.style.borderColor="blue";
    obj.style.background="lightgreen";
    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("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";
    }
    </s c r i p t>
    <div style="width:700px;wihte-space:nowrap">
    <span id=tab1 style="width:150px;display:-moz-inline-box" onclick=draw(this)>
    new books
    </span>&nbsp;
    <span id=tab2 style="width:150px;display:-moz-inline-box" onclick=draw(this)>
    hot books
    </span>&nbsp;
    <span id=tab3 style="width:150px;display:-moz-inline-box" onclick=draw(this)>
    classical books
    </span>&nbsp;
    <span id=tab4 style="width:150px;display:-moz-inline-box" 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>
    分享到:

    历史上的今天:

    白夜 2011-08-03