菜单 · JavaScript

``` <body> <div id="menu"> <ul id="list"> <li class="current"><a href="javascript:void(0)">首页</a></li> <li><a href="javascript:void(0)">播客</a></li> <li><a href="javascript:void(0)">博客</a></li> <li><a href="javascript:void(0)">相册</a></li> <li><a href="javascript:void(0)">关于</a></li> <li><a href="javascript:void(0)">帮助</a></li> </ul> </div> <script> //javascript是协议,浏览器的地址栏也是可以执行javascript的,void()可以执行一个表达式,返回undefined var menu = document.getElementById('menu'); var ul = menu.firstElementChild; for (let i = 0; i < ul.children.length; i++) { var li = ul.children[i]; //获取li中的a标签 var link = li.firstElementChild; link.onclick = fn; } function fn() { for (let i = 0; i < ul.children.length; i++) { var li = ul.children[i]; li.className = ''; } //this就是当前的a标签的元素 this.parentNode.className = 'current'; return false; } </script> ```