javascript选项卡功能

系统管理员 2022-05-12 02:44 177阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		*{padding: 0px;margin: 0px;}
    		#container{width: 480px;height: 350px;/*border: 1px solid gray;border-top: none;*/margin-top: 30px;
    			margin-left: 50px;}
    		ul,li{list-style: none;}
    		#container #menu li{float: left;width: 120px;text-align: center;line-height: 35px;
    			border-right: 1px solid #ccc;box-sizing: border-box;}
    		/*#container #menu li:last-child{border-right: none;}*/
    		#container #menu li.current{border: 1px solid red;border-bottom: none;}
    		#container #menu li:hover{cursor: pointer;}
    
    		#content{border: 1px solid gray;border-top: none;width: 100%;height: 315px;clear: both;}
    		#content div{display: none;text-align: center;line-height: 315px;background:blue;}
    		#content div.sel{display: block;}
    	</style>
    </head>
    <body>
    <div id="container">
    		<ul id="menu">
    			<li class="current">充话费</li>
    			<li >旅游</li>
    			<li >车险</li>
    			<li >游戏</li>
    		</ul>
    		<div id="content">
    			<div class="sel">话费99</div>
    			<div>国内旅游</div>
    			<div>车险99折</div>
    			<div>吃鸡</div>
    		</div>
    	</div>	
    	<script>
    	var lis=document.getElementById('menu').getElementsByTagName('li');
    	var div1=document.getElementById('content').getElementsByTagName('div');
    	var inx=0;//保存当前被选中的菜单索引
    	//添加事件
    	for (var i = 0; i < lis.length; i++) {
    		lis[i]._index=i;
    		lis[i].onclick=function () {
    			//恢复当前菜单
                 lis[inx].className='';
                //上一个显示的内容区隐藏 
                 div1[inx].className=''
                 //点击 改变当前class样式；
    			this.className='current';
    			//修改内容区 被点击的对应的div
    			div1[this._index].className='sel';
                //修改index的值
                inx=this._index;
    		}
    		
    	}
    	</script>
    </body>
    </html>