css3与jS实现彩色圆角选项卡

 首页 > 网页特效 > 菜单特效 > css3与jS实现彩色圆角选项卡

css3与jS实现彩色圆角选项卡

 2018-07-05  560  收藏  0 赞一个  0 真差劲  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>
<title> 不同颜色选项卡 </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
	font: 12px/20px 'microsoft yahei', '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: 2em auto;
	}
	.card_List {
		height: 30px;
		border-bottom: 1px solid #f00;
		position: relative;
	}
	.card_List li {
		float: left;
		width: 68px;
		text-align: center;
		height: 30px;
		line-height: 30px;
		margin: 0 5px;
		display: inline;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}
	.card_List li.current {
		height: 34px;
		line-height: 34px;
		margin-top: -4px;
		border: 1px solid #F00;
		background: #FF9494;
		border-bottom: none;
		color: #fff;
	}
	#oLi li:nth-child(1){
		background: #FF9494;
	}
	#oLi li:nth-child(2){
		background: #8CFE8C;
	}
	#oLi li:nth-child(3){
		background: #6969FB;
	}
	#oLi li:nth-child(4){
		background: #FFE26F;
	}
	.card_content div {
		display: none;
		height: 100px;
		text-align: center;
		color: white;
	}
	.card_content div:first-child {
		background: #FF9494;
	}
  </style>
  <script type="text/javascript">
	window.onload = function () {
		var colorArr = {
			0:"#f00",
			1:"#0f0",
			2:"#00f",
			3:"#FC0"
		};
		var bgColorArr = {
			0:"#FF9494",
			1:"#8CFE8C",
			2:"#6969FB",
			3:"#FFE26F",
		}
		var oL = document.getElementById("oLi");
		var oLi = oL.getElementsByTagName("li");
		var oUl = document.getElementById("oUl").getElementsByTagName("div");
		for ( var i=0 ; i<oLi.length ; i++ ){
			oLi[i].index = i;
			oLi[i].onclick = function () {
				for ( var j = 0 ; j < oLi.length ; j++ ){
					oLi[j].className = "";
					oLi[j].style.border = "none";
				}
				this.className = "current";
				this.style.border = "1px solid " + colorArr[this.index];
				this.style.borderBottom = "none";
				oL.style.borderBottom = "1px solid " + colorArr[this.index];
				for ( var j=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>
	<div id="wrap">
		<ul id="oLi" class="card_List clearfix">
			<li class="current">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
		</ul>
		<div id="oUl" class="card_content">
			<div style="display:block;">
				11111111111
			</div>
			<div>
				22222222222
			</div>
			<div>
				33333333333
			</div>
			<div>
				44444444444
			</div>
		</div>
	</div>

	<!-- 以下与演示代码无关,使用时请移除. --> 
	<style type="text/css">
	#azz_discription{ width:600px; height:auto; border:1px dashed #CCC; margin:0 auto; padding:10px;}
	#azz_discription p{ line-height:25px;}
	</style>
	<div style="height:20px;"></div>
	<div id="azz_discription">
	<p style="text-align:center;">来源：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a>　代码整理：<a href="http://www.aizhanzhe.com" target="_blank">懒之才</a></p>
	<p>&hearts;尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
	</div>

<!-- 以上与演示代码无关,使用时请移除. --> 


 </body>
</html>

运行代码 全选代码 复制代码 清除代码 恢复代码

预览图片

CSS3与jS实现彩色圆角选项卡，因使用了HTML5，因此测试时请确保您的浏览器支持CSS3,若使用IE的话，请使用IE9，其它版本的IE将看不到彩色和圆角，而且网页报错。

一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。

三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！

四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.

五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源，请注明转载来自并附带链接

七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com

 大家评论

 站长推荐

 点击排行