JS——QQ列表展示

最新推荐文章于 2020-12-17 22:35:19 发布

野猫WildCat

最新推荐文章于 2020-12-17 22:35:19 发布

阅读量350

点赞数

文章标签： js css html

本文链接：https://blog.csdn.net/k123ook/article/details/106441486

版权


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			li{
				list-style: none;
			}
			ul,h2{
				padding: 0;
				margin: 0;
			}
			#uli{
				margin: 0 auto;
			}
			#list h2{
				background: url(img/1.png) no-repeat #bfedf2 5px center;
				width: 200px;
				height: 30px;
				text-align: center;
				line-height: 30px;
			}
			#list ul{
				display: none;
			}
			#list li{
				width:200px;
				height: 30px;
				text-indent: 3em;
				background-color: honeydew;
				font-family: "微软雅黑";
				font-size: 18px;
			}
			#list h2.active{
				background: url(img/2.png) no-repeat #bfedf2 5px center;
			}
			#list li:hover{
				background-color: blanchedalmond;
			}
		</style>
		<script>
			window.onload=function(){
				var aList=document.getElementById('list');
				var oUl= document.getElementById('uli');
				var aUl=oUl.getElementsByTagName('ul');
				var aH2=oUl.getElementsByTagName('h2');
	            var arrLi = [];
	            
				for (var i =0;i<aH2.length;i++){
					aH2[i].index=i;
					aH2[i].onclick=function(){
						if(this.className==''){
						aUl[this.index].style.display='block';
						this.className='active';
						}else{
							aUl[this.index].style.display='none';
							this.className='';
						}
					}
				}	
			}
	
		</script>
	</head>
	<body>
		<ul id="uli">
			<li id="list">
				<h2>小学</h2>
				<ul>
					<li>tom</li>
					<li>rob</li>
					<li>jucy</li>
				</ul>
			</li>
			<li id="list">
				<h2>初中</h2>
				<ul>
					<li>algn</li>
					<li>rose</li>
					<li>koko</li>
				</ul>
			</li>
			<li id="list">
				<h2>大学</h2>
				<ul>
					<li>fundy</li>
					<li>baby</li>
					<li>angle</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

在这里插入图片描述

野猫WildCat

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JS——QQ列表展示

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> li{ list-style: none; } ul,h2{ padding: 0; margin: 0; } #uli{ margin: 0 auto; } #list h2{ .
复制链接

扫一扫