原生態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