原生态javascript 选项卡功能

时间 2019-12-05

原文原文链接

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>选项卡</title>
<style>

*{
	padding: 0;margin: 0;
}

body{
	padding: 100px;
}
ul:after{
	content: '';
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}
ul li{
	list-style-type: none;
	height: 30px;
	border: 1px solid #abcdef;
	float: left;
	padding: 0 15px;
	line-height: 30px;
	margin-right: 3px;
	cursor: pointer;
}
.current{
	background: #abcdef;
}

#content div{
	height: 200px;
	width: 300px;
	border: 1px solid gray;
	display: none;
}
#content div.show{
	display: block;
}
</style>
</head>
<body>
<ul>
	<li class="current">PHP</li>
	<li>java</li>
	<li>pthon</li>
</ul>
<div id="content">
	<div class="show">PHP......</div>
	<div>java.....</div>
	<div>pthon....</div>
</div>
<script>
	var ul = document.getElementsByTagName('ul')[0];
	var li = ul.getElementsByTagName('li');
	var content = document.getElementById('content');
	var div = content.getElementsByTagName('div');

	for(var i = 0;i < li.length; i++){
		li[i].index = i;
		li[i].onclick=function(){
			for (var i=0;i<li.length;i++) {
				li[i].className="";
				div[i].style.display='none';
			};
			this.className = 'current';
			div[this.index].style.display="block";
		};
	};
</script>
</body>
</html>

//首先获取被点击的元素以及点击后要操做的元素php

//解释：被点击元素和被点击所要显示内容的元素都是有默认样式 [例如蓝色表示以及对应显示元素应该是显示的]html

//既然是多个被点击的应该在循环中添加点击事件java

//首先被点击者被点击了应该清空全部的点击对象的蓝色样式ui

//而后把全部的要显示的元素都隐藏this

//最后给被点击的对象加上蓝色表示以及找到对应应该显示的内容code