决战JS（二） - 爱码网

紧接着上次的《决战JS》，分析总结一些比较实用的DEMO与新手分享，望大神拍砖。

demo5.点击隐藏:

要实现这个功能只需要知道在onclick事件中加入对父节点的样式dislay设置为none就完全足够了。实现的效果是当用户点击“hide this”时，该链接的父节点的样式自动隐藏。对于网上的很多广告或通知之类的用这种实现，只需将ul,li换为div，然后再稍作修改，实现方法是比较轻松。

<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function()
{
    var aA=document.getElementsByTagName('a');//用getElementsTagName获取标签<a>,类型为数组
    var oUl=document.getElementById('ul1');

   for(var i=0;i<aA.length;i++)
    {
     aA[i].onclick=function(){//添加onclick事件
        this.parentNode.style.display='none';//将父节点的样式display设置为none
     };
    }
};

</script>
</head>

<body>
<ul id="ul1">
  <li>aaaaaa <a href="javascript:;">hide this</a></li>
  <li>bbbbbb <a href="javascript:;">hide this</a></li>
  <li>cccccc <a href="javascript:;">hide this</a></li>
  <li>dddddd <a href="javascript:;">hide this</a></li>
  <li>eeeeee <a href="javascript:;">hide this</a></li>
</ul>
</body>
</html>

View Code