。。。tab页设计。。。。。

　　以前在用.net编桌面程序时曾经用过tab页，觉得其实挺好用的，在网页上面也看过不少的这样的东西，刚开始觉得还挺神奇的，最近自己学习了web前端的一些设计，就想要自己也做出来一个，于是就着手实现，实现出来感觉其实也挺简单的。

　　其实javascript+css能做出来不少的东西。。。。。

页面源码：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style type="text/css">
    #tab{
        width:240px;
        height:240px;
        position:absolute;
    }
    #head{
        height:18px;
    }
    #tab ul{
        margin:0px;
        padding:0px;
        border:0px;
        float:left;
        list-style:none;
        height:20px;
        cursor:pointer;
    }
    .linouse{
        text-align:center;
        float:left;
        width:78px;
        border-right:1px solid #000000;
        border-bottom:1px solid #000000;
        border-top:1px solid #000000;
        border-left:1px solid #000000;
        background-color:#00CCFF;
    }
    .liuse{
        font-weight:bold;
        text-align:center;
        float:left;
        width:78px;
        border-right:1px solid #000000;
        border-top:1px solid #000000;
        border-left:1px solid #000000;
        background-color:#FFFFFF;
    }
    .contentnouse{
        height:220px;
        width:240px;
        display:none;
    }
    .contentuse{
        height:220px;
        width:238px;
        display:block;
        border:1px solid #000000;
    }
</style>

<script type="text/javascript">
    function $(id){
        return document.getElementById(id);
    }
    function changeTab(obj,nu){
        var lis=$('head').getElementsByTagName('li');
        for(i=0;i<lis.length;i++){
            lis[i].className='linouse';
        }
        obj.className='liuse';
        for(i=1;i<=3;i++){
            $(('content'+i)).className='contentnouse';
        }
        $(('content'+nu)).className='contentuse';
    }
</script>

</head>

<body>
    <div id="tab">
        <div id="head">
            <ul>
                <li id="li1" class="liuse" onclick="changeTab(this,1)">股票</li>
                <li id="li2" class="linouse" onclick="changeTab(this,2)">彩票</li>
                <li id="li3" class="linouse" onclick="changeTab(this,3)">电话</li>
            </ul>
        </div>
        <div id="content1" class="contentuse">
            111
        </div>
        <div id="content2" class="contentnouse">
            222
        </div>
        <div id="content3" class="contentnouse">
            333
        </div>
    </div>

</body>
</html>



posted on 2011-12-05 21:41  fjs_cloud  阅读(280)  评论(0)    收藏  举报

导航