第一次用CSS写的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=gb2312" />
<title></title>
<style type="text/css">
body{margin:0px;}
.cx{
width: 500px;
/* border:solid 1px #000; */
font-family:Arial,sans-serif;
font-size:12px;
border-bottom:solid 10px #C6D4E7;
}
.c{
width: 500px;
/* border:solid 1px #000; */
font-family:Arial,sans-serif;
font-size:12px;
height:24px;
border-bottom:solid 10px #C6D4E7;
}
.m{
border:solid 0px #000;
}
.m ul{
list-style: none;
}
.m li{
float: left;
}
.m li a{
display: block;
width: 50px;
padding:5px;
text-align:center;
}
.m a:link,.m a:visited{
color: #000;
text-decoration: none;
}
.m a:hover{
text-decoration:underline;
color:#f00;
background: #C6D4E7;
}
.current{
background: #C6D4E7;
color:#000;
}
#content{
position:absolute;
border:solid 1px #C6D4E7;
margin-top:0px;
width:498px;
height:100px;
color:red;
font-size:12px;
}
</style>
<script type="text/javascript" language="JavaScript">
if(navigator.userAgent.indexOf("Firefox")>0)
{
//window.alert("请不要使用FireFox这种讨人厌的浏览器了");
}
function change(obj)
{
// alert(obj.className);
var cs=obj.parentNode.childNodes;
for(i=0;i<cs.length;i++)cs[i].className='';
obj.className='current';
//document.getElementById('content').innerHTML=obj.innerText;
navigator.userAgent.indexOf("Firefox")<0?document.all.content.innerHTML=obj.innerText.replace(' ',''):document.getElementById('content').innerHTML="<font>FF是个垃圾</font>";
}
</script>
</head>
<body>
<div id="container" class="c">
<div id="menu" class="m">
<ul>
<li class="current" onclick="change(this)"><a href="javascript:void(0)">首 页</a></li>
<li onclick="change(this)"><a href="javascript:void(0)">产 品</a></li>
<li onclick="change(this)"><a href="javascript:void(0)">服 务</a></li>
<li onclick="change(this)"><a href="javascript:void(0)">售 后</a></li>
<li onclick="change(this)"><a href="javascript:void(0)">支 持</a></li>
</ul>
</div>
</div>
<div id="content"></div>
</body>
</html>
<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">
body{margin:0px;}
.cx{
width: 500px;
/* border:solid 1px #000; */
font-family:Arial,sans-serif;
font-size:12px;
border-bottom:solid 10px #C6D4E7;
}
.c{
width: 500px;
/* border:solid 1px #000; */
font-family:Arial,sans-serif;
font-size:12px;
height:24px;
border-bottom:solid 10px #C6D4E7;
}
.m{
border:solid 0px #000;
}
.m ul{
list-style: none;
}
.m li{
float: left;
}
.m li a{
display: block;
width: 50px;
padding:5px;
text-align:center;
}
.m a:link,.m a:visited{
color: #000;
text-decoration: none;
}
.m a:hover{
text-decoration:underline;
color:#f00;
background: #C6D4E7;
}
.current{
background: #C6D4E7;
color:#000;
}
#content{
position:absolute;
border:solid 1px #C6D4E7;
margin-top:0px;
width:498px;
height:100px;
color:red;
font-size:12px;
}
</style>
<script type="text/javascript" language="JavaScript">
if(navigator.userAgent.indexOf("Firefox")>0)
{
//window.alert("请不要使用FireFox这种讨人厌的浏览器了");
}
function change(obj)
{
// alert(obj.className);
var cs=obj.parentNode.childNodes;
for(i=0;i<cs.length;i++)cs[i].className='';
obj.className='current';
//document.getElementById('content').innerHTML=obj.innerText;
navigator.userAgent.indexOf("Firefox")<0?document.all.content.innerHTML=obj.innerText.replace(' ',''):document.getElementById('content').innerHTML="<font>FF是个垃圾</font>";
}
</script>
</head>
<body>
<div id="container" class="c">
<div id="menu" class="m">
<ul>
<li class="current" onclick="change(this)"><a href="javascript:void(0)">首 页</a></li>
<li onclick="change(this)"><a href="javascript:void(0)">产 品</a></li>
<li onclick="change(this)"><a href="javascript:void(0)">服 务</a></li>
<li onclick="change(this)"><a href="javascript:void(0)">售 后</a></li>
<li onclick="change(this)"><a href="javascript:void(0)">支 持</a></li>
</ul>
</div>
</div>
<div id="content"></div>
</body>
</html>
