js—QQ菜单简单实例

最新推荐文章于 2019-04-22 11:24:39 发布

J.WADE

最新推荐文章于 2019-04-22 11:24:39 发布

阅读量389

点赞数

分类专栏： JS学习文章标签： js

本文链接：https://blog.csdn.net/qq_28147861/article/details/78444272

版权

JS学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用JS索引值(this.index)实现的qq菜单实例！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul,h2{padding: 0; margin: 0;}
			li{list-style: none;}
			#list{width:240px; border: 1px solid #333;margin: 0 auto;}
			#list.lis{}
			#list h2{height: 30px; line-height: 30px; text-indent: 20px;background: url(img/ico1.gif) no-repeat 5px center #6FF; color: #000;}
			#list .active{background: url(img/ico2.gif) no-repeat 5px center #600;color: #66FFFF;}
			#list ul{ display: none;}
			#list ul .hover{background: #66FFFF;}
			#list ul li{line-height: 24px;border-bottom: 1px solid #333;text-indent: 24px;}
		</style>
		<script>
			window.οnlοad=function()
			{
				var oUI=document.getElementById("list");
				var aH2=oUI.getElementsByTagName("h2");
				var aUI=oUI.getElementsByTagName("ul");
				var aLi=null;
				var arrLi=[];
				
				for(var i=0;i<aH2.length;i++)
				{
					aH2[i].index=i;
					aH2[i].οnclick=function()
					{
						if(this.className=="")
						{
						aUI[this.index].style.display='block';
						this.className="active";
						}else
						{
						aUI[this.index].style.display='none';
						this.className="";
						}
					}
				}
			
				for(var i=0;i<aUI.length;i++)
				{
					aLi=aUI[i].getElementsByTagName("li");
					for(var j=0;j<aLi.length;j++)
					{
						arrLi.push(aLi[j]);
					}
				}


                for(var i=0;i<arrLi.length;i++)
				{
					arrLi[i].οnclick=function()
					{
						for(var i=0;i<arrLi.length;i++)
						{
							arrLi[i].className='';
						}
						this.className='hover';
					}
				}
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li class="lis">
				<h2>我的好友</h2>
				<ul>
					<li>one</li>
					<li>two</li>
					<li>three</li>
				</ul>
			</li>
			<li class="lis"> 
				<h2>陌生人</h2>
				<ul>
					<li>one</li>
					<li>two</li>
					<li>three</li>
				</ul>
			</li>
			<li class="lis">
				<h2>黑名单</h2>
				<ul>
					<li>one</li>
					<li>two</li>
					<li>three</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

J.WADE

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js—QQ菜单简单实例

用JS索引值(this.index)实现的qq菜单实例！ ul,h2{padding: 0; margin: 0;} li{list-style: none;} #list{width:240px; border: 1px solid #333;margin: 0 auto;} #list.lis{} #list h2{height: 30px
复制链接

扫一扫

专栏目录