tab选项卡效果

CSS的部分：

			*{    
				padding: 0;    
				margin: 0;    
			}    
			#tab{    
				width: 600px;    
				height: 400px;    
				border: 5px solid blue;    
				margin: 50px auto;    
				position: relative;    
			}    
			#tab ul li{    
				list-style: none;    
				float: left;    
				width: 200px;    
				height: 50px;    
				line-height: 50px;    
				font-size: 30px;    
				text-align: center;    
			}    
			#tab .con{    
				width: 580px;    
				height: 320px;    
				position: absolute;    
				left: 10px;    
				top: 60px;    
			}

JS部分

	window.onload = function(){    
//	抓元素    
	var tab = document.getElementById('tab');    
	var lis = tab.getElementsByTagName('li');    
	var cons = tab.getElementsByClassName('con');    
//	循环,给li加单击事件    
	for (var i=0;i<lis.length;i++) {    
//	循环后给每个i号li加序号  弄一个变量存序号    
	lis[i].xuhao = i;    
//	循环后给每个li加个单击事件    
//	lis[i].onclick = function(){    
//	如果不用点击就滑动,加个移入事件就OK了    
	lis[i].onmouseover = function(){    
//	获得的序号    
//	alert(this.xuhao);    
//	让所有的cons都隐藏    
	for (var i=0;i<cons.length;i++) {    
	cons[i].style.display = 'none';    
	}    
//	让this.xuhao对应的con显示    
	cons[this.xuhao].style.display = 'block';    
		}    
	}    
	}

HTML

		<div id="tab">    
		<ul>    
			<li style="background: olive;">新闻</li>    
			<li style="background: darkgreen;">图片</li>    
			<li style="background: darkviolet;">军事</li>    
		</ul>    
		<div class="con" style="background: olive; display: block;"></div>    
		<div class="con" style="background: darkgreen;"></div>    
		<div class="con" style="background: darkviolet;"></div>    
		</div>

代码效果图片：

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知