css与js实现Tab标签切换

如下图所示的tab菜单切换，目前很流行这种效果。

代码如下：

<!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=utf-8" />
<title>tab标签切换</title>
<style>
*{
font-size:10.5pt;
margin:0px;
padding:0px;
}
    .codeDemoUL {
    list-style: none;
    clear:right;
    overflow:hidden;
    cursor:pointer;
    z-index:3;
    position:relative;
    margin-bottom:-1px;
    }
    .codeDemoUL li {
    float:left;
    padding:5px 10px;
    display:inline;
    border-bottom:none;
    margin: 0 5px 0 0;
    overflow: visible;
    line-height:1.5em;
}
.codeDemomouseOnMenu {
border:1px solid #bdc5c8;
border-bottom:1px solid #fff;
background-color:#fff;
font-weight:bold;
}
.codeDemomouseOutMenu
{
border:1px solid #bdc5c8;
background-color:#d7e0e3;
}
.codeDemoDiv {
    clear:both;
    border:1px solid #bdc5c8;
    overflow:hidden;
    margin-bottom:10px;
    }
</style>

<SCRIPT LANGUAGE="JavaScript">
<!--
var $ = function(o) {return document.getElementById(o);}
function showDiv(parm)
{
    $('divDemo').style.display='none';
    $('divCode').style.display='none';
    $(parm).style.display = '';
    for(var i in $('ulMenu').getElementsByTagName('LI')){
        $('ulMenu').getElementsByTagName('LI')[i].className = 'codeDemomouseOutMenu';
    }
}
//-->
</SCRIPT>
</head>
<body>
    <ul class="codeDemoUL" id="ulMenu">
            <li class="codeDemomouseOnMenu" onclick="showDiv('divDemo');this.className='codeDemomouseOnMenu'">演  示</li>
            <li class="codeDemomouseOutMenu" onclick="showDiv('divCode');this.className='codeDemomouseOnMenu'">代  码</li>
    </ul>    
    <div  class="codeDemoDiv" id="divDemo">
    <br />
        &nbsp;&nbsp;&nbsp;演示
    </div>
    <div class="codeDemoDiv" id="divCode" style="display:none">
        <br />&nbsp;&nbsp;&nbsp;代码
    </div>

</body>
</html>

posted @ 2011-03-24 17:43  qandq  阅读(4031)  评论(0)  编辑  收藏  举报