选项卡切换（纯Javascript&CSS实现）

最新推荐文章于 2022-11-08 20:26:43 发布

CasvotLee

最新推荐文章于 2022-11-08 20:26:43 发布

阅读量393

点赞数

本文链接：https://blog.csdn.net/ledgewont/article/details/77066063

版权

1. index属性

用来返回列表中选中的选项的索引位置

optionObject.index

源代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Win！</title>
</head>
<style>
	#tab{position:relative} /*所有内容的位置相对与浏览器*/
	#tab .tablist ul li{     /*设置标题行的样式*/ 
		list-style-type: none;/*去掉li标签d的大圆点*/
		float:left;    /*设置三个标题左浮，由上至下变为左至右*/
		border:1px solid #ccc; /*标题的边框*/
		padding:5px 0px;      /*设置标题内容与边框的距离 */
		width:145px;            /*设置标题行的宽度*/
		text-align:center;     /*标题居中*/
		margin-left:-42px;   /*外间距，即div块之间的距离*/
	    margin-right:43px;
		position:relative; /*相对于前面元素定位之后的定位*/
		cursor:pointer;    /*鼠标类型*/
	}
	
	#tab .tabcon {                   /*设置最外层的样式*/
		position:absolute;
		left:-1px;                   /*设置内容框在浏览器中定位*/
		top:32px;
		border:1px solid #828282;  /*内容框边界*/
		border-top:none;             /*设置内容框的上边界为”无边界“*/
		width:440px;     /*设置长宽*/
		height: 300px;
		
	}	
	#tab .tabcon div{        /*设置内容框的几个子框*/
		padding:10px;
		position:absolute;
		opacity: 0;         /*保证打开网页时只显示第一个内容框*/
	}
    #tab .tablist li.cur0{  /*标题,这个样式是用于打开网页显示第一个标题，内容*/
		border-bottom:none;
		background:#ccc;
		
	}
	#tab .tabcon div.cur1{    /*内容块样式，用于初始化*/
		opacity:1;
		
	   line-height: 60px;
		float:left;
		left:15%;
		
	}
	
	</style>
<body>
<div id="tab" style="margin-left:340px;margin-top:20px">
	<div class="tablist">
		<ul>
			<li class="cur0">房产</li>
			<li>家具</li>
			<li>二手房</li>
		</ul>
	</div>
	
	<div class="tabcon">
		<div class="cur1">275万购昌平邻铁三居 总价20万买一居<br>
    200万内购五环三居 140万安家东三环<br>
    北京首现零首付楼盘 53万购东5环50平<br>
    京楼盘直降5000 中信府 公园楼王现房</div>
		<div>40平出租屋大改造 美少女的混搭小窝<br>
     经典清新简欧爱家 90平老房焕发新生<br>
     新中式的酷色温情 66平撞色活泼家居<br>
     瓷砖就像选好老婆 卫生间烟道的设计</div>
		<div>  通州豪华3居260万 二环稀缺2居250w甩<br>
     西3环通透2居290万 130万2居限量抢购<br>
     黄城根小学学区仅260万 121平70万抛!<br>
     独家别墅280万 苏州桥2居优惠价248万</div>
		
	</div>
</div>
<script>
	window.οnlοad=function()
	{
		var tab=document.getElementById("tab");
		var Divs=tab.getElementsByTagName("div"); 
		var lis=Divs[0].getElementsByTagName("li");/*获取标题数组*/
		var contents=Divs[1].getElementsByTagName("div");/*获取内块数组*/
		var timer=null; //初始化timer
		for(var j=0;j<lis.length;j++)
			{
				lis[j].index=j;
				lis[j].οnmοuseοver=function()
				{
					show(this.index); //this表示当前对象lis[j];
				}
			} //这个循环用于对标题绑定索引号以及鼠标事件
		
		function show(a)   //显示内容块的函数
		{
			index=a;     //当前索引号 
			var alpha=0;  //alpha用于之后的内容透明度变化效果
			for(var i=0;i<lis.length;i++)
				{
					lis[i].className="";
					contents[i].className="";
					contents[i].style.opacity=0;
				}  //这个循环用于隐藏所有的内容
			lis[index].className="cur0";
			contents[index].className="cur1"; //这两处用于打开网页时显示第一个标题以及内容快
			clearInterval(timer);
			timer=setInterval(        //定时器，造成文字渐变出现的效果
			     function(){
					 
					 alpha+=2;
					 contents[index].style.opacity=alpha / 100;
					 //这两句话引起渐变效果
					 if(alpha==100) //达到透明度最大，清除计时器
						 clearInterval(timer);	 
				 }
				,30) //30ms实现一次透明度变化
		}	
	}

	</script>
</body>
</html>