标签卡片式翻动浏览

最新推荐文章于 2021-06-22 23:35:51 发布

jujuchen

最新推荐文章于 2021-06-22 23:35:51 发布

阅读量578

点赞数

分类专栏： js脚本文章标签： function xhtml html 扩展 border 浏览器

本文链接：https://blog.csdn.net/jujuchen/article/details/1631322

版权

js脚本专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!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.οnlοad=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].οnclick=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>

jujuchen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标签卡片式翻动浏览

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">标签卡片式翻动浏览html,body{ width:100%; height:100%; margin:0;}BODY { font-family:"雅黑","宋体",arial; FONT-SIZE: 12px; backg
复制链接

扫一扫