标签卡式的导航
标签卡式的导航~~~~做不来啊~~网站需要做一个标签卡样式的导航菜单~~~~~~~
请各位前辈给点代码啊???
网上替你找了个,不知道是否合你要求.如果不是你想要的自己到百度去找.
[CODE]<!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>
html,body{
width:100%;
height:100%;
margin:0;
}
BODY {
font-family:"雅黑","宋体",arial;
FONT-SIZE: 12px;
background-color:#FFFFFF;
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #333; PADDING-TOP: 0px; TEXT-ALIGN: left
}
ul,li{
margin:0;
padding:0;
display:block;
list-style-type: none;
}
#card{
width:100%;
height:100%;
}
#card ul{
width:100%;
}
#card_title{
height:30px;
width:200px;
}
#card_title li{
float:left;
background-color:#FFFFFF;
border-top:#999 1px solid;
border-left:#999 1px solid;
border-right:#999 1px solid;
line-height:25px;
text-align:center;
margin:10px 5px 0 5px;
padding-left:10px;
padding-right:10px;
font-weight:bold;
cursor:pointer;
}
#card_content{
width:100%;
height:500px;
background-color:#CCCCCC;
}
#card_content li{
width:100%;
height:100%;
background-color:#fff;
border:#999 1px solid;
}
</style>
</head>
<body>
<div id="card">
<ul id="card_title">
<li>首页</li>
<li>我的信息</li>
<li>收邮件</li>
</ul>
<ul id="card_content">
<li>1111111111</li>
<li>2222222222</li>
<li>3333333333</li>
</ul>
</div>
<script>
function $(id) {
return document.getElementById(id);
}
/*
本模块主要完成标签卡片式翻动浏览
功能包括：
１．点击完成卡片切换，点击项文色变色
２．自定义起始项
优点包括：
１．完全XHTML结构支持多浏览器
２．CSS/JS/HTML代码一目了解易于布署
３．仅需修改CSS，易于扩展衍生其它形态，仅需要修改JS，易于扩展其它复杂功能
*/
var oneShow=1;//定义起始项
var tLi=$('card_title').getElementsByTagName('li');
var cLi=$('card_content').getElementsByTagName('li');
window.onload=function(){
var tLen=tLi.length;
if(tLen>0){
for(var i=0;i<tLen;i++){
tLi[i].id='card_title_'+i;
cLi[i].id='card_content_'+i;
if(oneShow!=i){
cLi[i].style.display='none';
}else{
cLi[i].style.display='';
$(tLi[i].id).style.color="#FF0000";
}
tLi[i].onclick=function(){//可改为onmouse动作
card_showhide(this.id,tLen);
}
}
}
}
function card_showhide(tid,num){
var cid=tid.replace('card_title','card_content');
for(var i=0;i<num;i++){
cLi[i].style.display='none'
tLi[i].style.color='';
}
$(cid).style.display='';
$(tid).style.color="#FF0000";
}
</script>
</body>
</html>[/CODE]
0vht7RxL.rar
