|
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>好友列表</title> <style type="text/css"> body{ font-family: "微软雅黑"; } table { border:#0099FF 1px solid; width:100px; border-collapse:collapse; margin:15px 10px; width:10%; } table td{ border:#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; } /* 使用display属性:如果取值为none就是隐藏标签。 */ table td div { display:none; } .open { display:block; } .close { display:none; } </style> <!--引入jquery的js库--> <script src="../js/jquery-1.4.2.js"></script> <script type="text/javascript"> /* --通过jQuery实现访QQ列表好友分组-- */ function openDiv(thisobj){ /* 点击当前分组: 如果分组是展开的, 就关闭分组; 如果分组是关闭的, 先关闭其他分组, 在展开当前分组 toggle() -- 切换元素的可见状态 */ //在展开当前分组之前, 先关闭其他三个分组 //>>选中其他三个分组并关闭. $(thisobj).parents("tr").siblings().find("div").hide(); //点击当前分组, 切换分组的状态(如果展开则关闭, 如果关闭则展开) $(thisobj).next().toggle(); } /* --通过js实现访QQ列表好友分组-- function openDiv(thisobj){ var oDiv = thisobj.parentNode.getElementsByTagName("div")[0]; var aDiv = document.getElementsByTagName("div"); //判断当前分组div是展开还是关闭 if(oDiv.style.display == "block"){ //如果当前div是打开的, 只需关闭该div即可 oDiv.style.display = "none"; }else{ //如果当前div是关闭的, 先关闭其他分组的div, 再打开当前的 for(var i=0;i<aDiv.length; i++){ aDiv[i].style.display = "none"; } oDiv.style.display = "block"; } } */ </script> </head> <body> <table> <tr> <td> <a href="javascript:void(0)" onclick="openDiv(this)">君王好友</a> <div> 秦始皇<br /> 刘邦<br /> 李世民<br /> 康熙<br /> </div> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="openDiv(this)">三国好友</a> <div> 刘备<br /> 关羽<br /> 张飞<br /> 赵云<br /> </div> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="openDiv(this)">美女好友</a> <div> 西施<br /> 貂蝉<br /> 杨贵妃<br /> 王昭君<br /> </div> </td> </tr> <tr> <td> <a href="javascript:void(0)" onclick="openDiv(this)">IT好友</a> <div> 马云<br /> 李开复<br /> 俞敏洪<br /> 黎活明<br /> </div> </td> </tr> </table> </body> </html> |
|
|
来自： 金银宝100 > 《jQuery知识点》
