用 javascript 做一个类似于 QQ好友列表

最新推荐文章于 2022-08-01 20:34:49 发布

尤子介

最新推荐文章于 2022-08-01 20:34:49 发布

阅读量823

点赞数

分类专栏： java-web

本文链接：https://blog.csdn.net/weixin_46546447/article/details/106722780

版权

java-web 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

样式

具体步骤

1.CSS 网页布局

：在 CSS 网页布局中我们使用了后代选择器（table td），也就意味着 table 中的 td标签全部使用该定义内容；table td div ：它意味着 table 中的 td 中的 div 中的内容
全部使用该定义；至于最后两个这是使用了我们的伪元素选择器，并利用了以下属性；

	 :link 表示元素未被点击的状态
	 :hover 表示光标移入的状态
	 :active 表示元素被点击时的状态
	 :visited 表示元素被访问过后的状态
	 :text-decoration 属性规定添加到文本的修饰。

在这里插入图片描述
2.Javascript 定义网页行为

：图片中被 script 包裹的代码就是 JavaScript 代码；虽然看着他很少，但是他所包含的内容确实不少：首先我们定义了一个普通方法，利用 function 关键字，openDiv 为函数名，thisobj 为参数；然后将参数传给 oA，然后利用 oA 所接收到参数，将他的父节点再次传出去，传给 oPerent，然后利用 .getElementsByTagNmae("")：根据标签名获取页面中的元素；然后在该方法中继续写一个判断语句

在这里插入图片描述
3.HTML 定义内容

在这里插入图片描述
效果图

代码

在这里插入代码片<!DOCTYPE HTML>
<HTML>
<HEAD>
 <meta http-equiv="content-type" content = "text/html charset=utf-8" / >
    <title>好友列表</title>
<style type = "text/css">
body{
        font-family:"微软雅黑";
        background-color:black;
      }
table{
         border:#0099FF 1px solid;
         width:100px;
         border-collapse:collapse;
         margin:15px 10px;
         width:10%;
       }
table td{
          boeder:#0066FF 1px solid;
          background-color:#6f5f3e;
          text-align:center;
          padding:5px 0px;
          }
table td div{
             background-color:#FFFF99;
             text-align:left;
             line-height:24px;
             padding-left:14px;
              }
table td a:link, table td a:visited{
             color:#00ffFF;
             text-decoration:none;  
                  }
table td a:hover{
               color:#00CC00;
                  }
table td div { display:none; }
.open { display:block; }
.close{ display:none; }
</style>
<script type="text/javascript">
  function openDiv(thisobj){
               var oA=thisobj;
               var oParent=oA.parentNode;
               var oDiv=oParent.getElementsByTagName("div")[0];
                    
  if(oDiv.style.display=="block"){
               oDiv.style.display="none";
      }else{
               var arrD=document.getElementsByTagName("div");
               for(var i=0;i<arrD.length;i++){
                  arrD[i].style.display="none"; 
       }
     oDiv.style.display="block";     
}
}
</script>
</HEAD>
<body>
<table>
   <tr>
     <td>
       <a  href="javascript:void(0)" οnclick="openDiv(this)">
         西游记好友</a>
        <div>
            唐僧<br />
            孙悟空<br />
            猪八戒<br />
            沙僧<br />
            白龙马<br />
        </div>
      </td>
     </tr>
 <tr>
     <td>
       <a  href="javascript:void(0)" οnclick="openDiv(this)">
         三国好友</a>
        <div>
            刘备<br />
            诸葛亮<br />
            关羽<br />
            张飞<br />
            赵云<br />
        </div>
      </td>
     </tr>
 <tr>
     <td>
       <a  href="javascript:void(0)" οnclick="openDiv(this)">
         水浒好友</a>
        <div>
            宋江<br />
            卢俊义<br />
            秦明<br />
            呼延灼<br />
            李逵<br />
        </div>
      </td>
     </tr>
</table>
</body>
</HTML>