<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #menu ul li { list-style-type: none; width: 80px; height: 30px; line-height: 30px; background-color:beige; text-align: center; float: left; margin-left: 5px; } #menu ul li.current { background-color: burlywood; } #menu ul li a { text-decoration: none; } </style> </head> <body> <div id="menu"> <ul> <li class="current"><a href="javascript:void(0)">首页</a></li> <li><a href="javascript:undefined">播客</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 src="common.js"></script> <script> // void 是运算符 // 执行void后面的表达式，并始终返回undefined var menu = my$('menu'); // 获取menu中的ul var ul = getFirstElementChild(menu); for (var i = 0; i < ul.children.length; i++) { var li = ul.children[i]; // 获取li中的a标签 var link = getFirstElementChild(li); // 注意：此时是把函数赋给onclick 而不是函数的调用 link.onclick = linkClick; } function linkClick() { // 所有的li取消高亮显示 for (var i = 0; i < ul.children.length; i++) { var li = ul.children[i]; li.className = ''; } // 让当前a标签所在的li高亮显示 // // this是当前点击的a标签对应的元素 this.parentNode.className = 'current'; // 取消后续内容的执行 return false; } // ele.firstChild // ele.firstElementChild </script> </body> </html>
common中的内容
function my$(id) {
return document.getElementById(id);
}
// 处理浏览器兼容性
// 获取第一个子元素
function getFirstElementChild(element) {
var node, nodes = element.childNodes, i = 0;
while (node = nodes[i++]) {
if (node.nodeType === 1) {
return node;
}
}
return null;
}
// 处理浏览器兼容性
// 获取下一个兄弟元素
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
// 处理innerText和textContent的兼容性问题
// 设置标签之间的内容
function setInnerText(element, content) {
// 判断当前浏览器是否支持 innerText
if (typeof element.innerText === 'string') {
element.innerText = content;
} else {
element.textContent = content;
}
}