本文主要是介绍qq面板切换效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" content="text/html" charset="UTF-8"><title>查询</title><link type="text/css" href="chaxun.css" rel="stylesheet"/>
</head>
<body>
<div class="mianban"><div id="anniu"><p>点击此处</p><div class="zhuangtai"><li class="wo">我在线上</li><li class="yin">隐身</li><li class="q">q我吧</li><li class="li">离线</li></div></div>
</div>
<script>function getclassname(classname){// var element=document.getElementsByTagName('*');// for(var i=0;i<element.length;i++)// {// if(element[i].className==classname)// {// break;// }// }// return element[i];return document.getElementsByClassName(classname)[0];}var p=document.getElementsByTagName('p');var zhuangtai=getclassname('zhuangtai');var mianban=getclassname('mianban');var li=document.getElementsByTagName('li');zhuangtai.style.display='none';p[0].οnclick=function(){if(zhuangtai.style.display=='block')zhuangtai.style.display='none';elsezhuangtai.style.display='block';}for(var i=0;i<li.length;i++){li[i].οnclick=function(event){event.stopPropagation();//阻止事件冒泡zhuangtai.style.display='none';p[0].innerHTML=this.innerHTML;console.log(i);}}</script>
</body>
</html>document.getElementsByClassName(classname)[0]这篇关于qq面板切换效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
