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 >

转载于:https://www.cnblogs.com/qandq/archive/2011/03/24/1994161.html