qq面板切换效果

最新推荐文章于 2022-06-23 15:22:43 发布

bobobe

最新推荐文章于 2022-06-23 15:22:43 发布

阅读量633

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/bobobe/article/details/44046441

javascript 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了HTML页面中按钮点击事件触发的JavaScript实现，包括显示和隐藏特定元素，以及通过事件监听器改变页面状态，提供了从基本到进阶的交互案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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].onclick=function(){
              if(zhuangtai.style.display=='block')
                     zhuangtai.style.display='none';
              else
                     zhuangtai.style.display='block';
        }
      for(var i=0;i<li.length;i++)
      {
        li[i].onclick=function(event){
          event.stopPropagation();//阻止事件冒泡
          zhuangtai.style.display='none';
          p[0].innerHTML=this.innerHTML;
          console.log(i);
          }
      }

</script>
</body>
</html>

document.getElementsByClassName(classname)[0]

这句话是获取class。也可以这么用。返回的是一个数组