js制作选项卡

最新推荐文章于 2022-11-13 20:35:01 发布

whispercode

最新推荐文章于 2022-11-13 20:35:01 发布

阅读量364

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/Dilan_Gwyn/article/details/89350610

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		*{margin: 0px;padding: 0px;}
		#box{width: 90%;height: 380px;margin: 0 auto;}
		#box #menu{list-style: none;}
		#box ul li{float: left;width: 100px;height: 35px;line-height: 35px;text-align: center;color: #333;;font-size: 17;background: #eaeeee;}
		#box ul li:hover{cursor: pointer;}
		#box ul li.current{color: white;background:skyblue;}
		#box #content{clear: both;}
		#box #content div{width: 100%;height: 380px;background: skyblue;display: none;}
		#box #content div.current{display: block;}
	</style>
</head>
<body>
	<div id="box">
		<ul id="menu">
			<li class="current" >企业合作</li>
			<li>关于我们</li>
			<li>123</li>
			<li>123</li>
			<li>123</li>
			<li>123</li>
			<li>123</li>
			//添加选项内容
		</ul>
		<div id="content">
			<div class="current">215</div>
			<div>bbbbbb</div>
			<div>abbbbb</div>
			<div>bcbbbbb</div>
			<div>bsbbbbb</div>
			<div>bbsbbbb</div>
			<div>bbcbbbb</div>
			//可以添加多个内容

		</div>
	</div>




	<script type="text/javascript">
		var lis=document.getElementById('menu').children;
		var divs=document.getElementById('content').children;
		var item=0;
		for (var i = 0;i<lis.length;i++) {
			lis[i]._index=i;//为每一个li标签新增一个属性_index并且将其保存在该属性中
			lis[i].function(){
				lis[item].className='';//当前选中的值为未选中状态
				divs[item].className='';
				
				
				this.className='current';
				divs[this._index].className='current'
				
				item=this._index;
				
			}
		}
	</script>
</body>
</html>