您正在使用IPV4(3.236.50.252)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头       深圳小产权房      

【腾讯云】热门云产品首单特惠秒杀,2核2G云服务器45元/年      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 儿童节 14
2022年 端午节 16
2023年 元 旦 228
2023年 春 节 249
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
javascript实现不同颜色Tab标签切换效果
内容摘要: htmlheadtitle不同颜色选项卡/titlemetahttp-equiv='Content-Type'content='text/html;charset=gb2312'/styletype='text/css'*{margin:0;padding:0;}body{font:12px/20px'microsoftyahei','arial';word......
<html>

<head>

<title>不同颜色选项卡</title>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<styletype="text/css">

*{

margin:0;

padding:0;

}

body{

font:12px/20px'microsoftyahei','arial';

word-break:break-all;

word-wrap:break-word;

}

.clearfix:after{

content:'.';

display:block;

clear:both;

height:0;

visibility:hidden;

}

.clearfix{

display:inline-block;

}

*html.clearfix{

height:1%;

}

.clearfix{

display:block;

}

#wrap{

width:320px;

margin:2emauto;

}

.card_List{

height:30px;

border-bottom:1pxsolid#f00;

position:relative;

}

.card_Listli{

float:left;

width:68px;

text-align:center;

height:30px;

line-height:30px;

margin:05px;

display:inline;

border-top-left-radius:6px;

border-top-right-radius:6px;

}

.card_Listli.current{

height:34px;

line-height:34px;

margin-top:-4px;

border:1pxsolid#F00;

background:#FF9494;

border-bottom:none;

color:#fff;

}

#oLili:nth-child(1){

background:#FF9494;

}

#oLili:nth-child(2){

background:#8CFE8C;

}

#oLili:nth-child(3){

background:#6969FB;

}

#oLili:nth-child(4){

background:#FFE26F;

}

.card_contentdiv{

display:none;

height:100px;

text-align:center;

color:#000;

}

.card_contentdiv:first-child{

background:#fff;

}

</style>

<scripttype="text/javascript">

window.onload=function(){

varcolorArr={

0:"#f00",

1:"#0f0",

2:"#00f",

3:"#FC0"

};

varbgColorArr={

0:"#fff",

1:"#fff",

2:"#fff",

3:"#fff",

}

varoL=document.getElementById("oLi");

varoLi=oL.getElementsByTagName("li");

varoUl=document.getElementById("oUl").getElementsByTagName("div");

for(vari=0;i<oLi.length;i++){

oLi[i].index=i;

oLi[i].onclick=function(){

for(varj=0;j<oLi.length;j++){

oLi[j].className="";

oLi[j].style.border="none";

}

this.className="current";

this.style.border="1pxsolid"+colorArr[this.index];

this.style.borderBottom="none";

oL.style.borderBottom="1pxsolid"+colorArr[this.index];

for(varj=0;j<oUl.length;j++){

oUl[j].style.display="none";

oUl[this.index].style.display="block";

oUl[j].style.backgroundColor=bgColorArr[this.index];

}

};

}

};

</script>

</head>

<body>

<divid="wrap">

<ulid="oLi"class="card_Listclearfix">

<liclass="current">1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

<divid="oUl"class="card_content">

<divstyle="display:block;">

11111111111111

</div>

<div>

22222222222

</div>

<div>

3333333333333

</div>

<div>

44444444444444444

</div>

</div>

</div>

</body>

</html>

上一篇:js简单倒计时实现代码 下一篇:JavaScript实例--实现计算器
发布日期:2022/1/18
手机扫二维码直达本页
发布时间:12:46:58
点击:552
录入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.2.1.220509(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022