节点操作案例3-菜单案例
Posted jiumen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了节点操作案例3-菜单案例相关的知识，希望对你有一定的参考价值。
<!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;
以上是关于节点操作案例3-菜单案例的主要内容，如果未能解决你的问题，请参考以下文章
Zookeeper -- Zookeeper JavaAPI相关操作（Curator介绍Curator API 常用操作（节点的CRUD，Watch事件监听）分布式锁模拟12306售票案例）