- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- #list li {
- list-style-type: none;
- width: 80px;
- height: 30px;
- line-height: 30px;
- background-color: beige;
- text-align: center;
- float: left;
- margin-left: 5px;
- }
- #list li.current {
- background-color: burlywood;
- }
- #list li a {
- text-decoration: none;
- }
- </style>
- </head>
- <body>
- <div id="menu">
- <ul id="list">
- <li class="current"><a href="http://www.baidu.com"> 首页 </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 src="common.js"></script>
- <script>
- var list = my$("list").getElementsByTagName("li");
- for (var i = 0; i <list.length; i++) {
- // 每个 li 中的 a
- var aObj = getFirstElementByParent(list[i]);
- // 为 a 注册鼠标点击事件
- aObj.onclick = function () {
- // 清空每个 li 的类样式
- for (var j = 0; j <list.length; j++) {
- list[j].removeAttribute("class");
- }
- this.parentNode.className = "current";
- // 阻止超链接跳转
- return false;
- };
- }
- </script>
- </body>
- </html>
common.js
- /**
- * Created by Administrator on 2018/8/18.
- */
- /**
- * Created by Administrator on 2016/7/27.
- */
- /**
- * Created by Administrator on 2016/7/21.
- *
- * 次文件来自 很牛 x 的程序员 .
- *
- * 作者: 无名
- */
- /*
- * 该函数是返回的是指定格式的日期, 是字符串类型
- * 参数: date ---- 日期
- * 返回值: 字符串类型的日期
- * */
- function getDatetoString(date) {
- var strDate;// 存储日期的字符串
- // 获取年
- var year = date.getFullYear();
- // 获取月
- var month = date.getMonth() + 1;
- // 获取日
- var day = date.getDate();
- // 获取小时
- var hour = date.getHours();
- // 获取分钟
- var minute = date.getMinutes();
- // 获取秒
- var second = date.getSeconds();
- hour = hour < 10 ? "0" + hour : hour;
- minute = minute < 10 ? "0" + minute : minute;
- second = second < 10 ? "0" + second : second;
- // 拼接
- strDate = year + "-" + month + "-" + day + ""+ hour +":"+ minute +":" + second;// 隐藏问题, 关于变量声明的位置
- return strDate;
- }
- // 根据 id 获取元素对象
- function my$(id) {
- return document.getElementById(id);
- }
- /*
- *
- * innerText 属性 IE 中支持
- * textContent 火狐中支持
- * dvObj.innerText="您好"; 设置 innerText 的值
- * console.log(dvObj.innerText); 获取 innerText 的值
- * 因为上述原因, inerText 有时候需要设置值, 有时候需要获取值
- * 所以, 需要写一个兼容的代码能在火狐中使用, 也可以在 IE 中使用
- *
- *
- * */
- /*
- * 设置 innerText 属性的值
- * element----- 为某个元素设置属性值
- * content----- 设置的值
- * */
- function setInnerText(element, content) {
- if (typeof element.textContent === "undefined") {
- //IE 浏览器
- element.innerText = content;
- } else {
- element.textContent = content;
- }
- }
- /*
- * 获取 innerText 属性的值
- * element 要获取的元素
- * 返回的是该元素的 innerText 值
- * */
- function getInnerText(element) {
- if (typeof element.textContent === "undefined") {
- //IE 浏览器
- return element.innerText;
- } else {
- return element.textContent;
- }
- }
- // 获取当前元素前一个元素
- function getPreviousElement(element) {
- if (element.previousElementSibling) {
- return element.previousElementSibling;
- } else {
- var ele = element.previousSibling;
- while (ele && ele.nodeType !== 1) {
- ele = ele.previousSibling;
- }
- return ele;
- }
- }
- // 获取当前元素的后一个元素
- function getNextElement(element) {
- if (element.nextElementSibling) {
- return element.nextElementSibling;
- } else {
- var ele = element.nextSibling;
- while (ele && ele.nodeType !== 1) {
- ele = ele.nextSibling;
- }
- return ele;
- }
- }
- // 获取父元素中的第一个元素
- function getFirstElementByParent(parent) {
- if (parent.firstElementChild) {
- return parent.firstElementChild;
- } else {
- var ele = parent.firstChild;
- while (ele && ele.nodeType !== 1) {
- ele = ele.nextSibling;
- }
- return ele;
- }
- }
- // 获取父元素中的最后一个元素
- function getLastElementByParent(parent) {
- if (parent.lastElementChild) {
- return parent.lastElementChild;
- } else {
- var ele = parent.lastChild;
- while (ele && ele.nodeType !== 1) {
- ele = ele.previousSibling;
- }
- return ele;
- }
- }
- // 获取兄弟元素
- function getsiblings(ele) {
- if (!ele)return;// 判断当前的 ele 这个元素是否存在
- var elements = [];// 定义数组的目的就是存储当前这个元素的所有的兄弟元素
- var el = ele.previousSibling;// 当前元素的前一个节点
- while (el) {
- if (el.nodeType === 1) {// 元素
- elements.push(el);// 加到数组中
- }
- el = el.previousSibling;
- }
- el = ele.nextSibling;
- while (el) {
- if (el.nodeType === 1) {
- elements.push(el);
- }
- el = el.nextSibling;
- }
- return elements;
- }
- //// 能力检测多个浏览器为同一个对象注册多个事件
- var EventTools = {
- // 为对象添加注册事件
- addEventListener: function (element, eventName, listener) {
- if (element.addEventListener) {
- element.addEventListener(eventName, listener, false);
- } else if (element.attachEvent) {
- element.attachEvent("on" + eventName, listener)
- } else {
- element["on" + eventName] = listener;
- }
- },
- // 为对象移除事件
- removeEventListener: function (element, eventName, listener) {
- if (element.removeEventListener) {
- element.removeEventListener(eventName, listener, false);
- } else if (element.detachEvent) {
- element.detachEvent("on" + eventName, listener);
- } else {
- element["on" + eventName] = null;
- }
- },
- // 获取参数 e
- getEvent: function (e) {
- return e || window.event;
- },
- getPageX: function (e) {
- if (e.pageX) {
- return e.pageX;
- } else {
- // 有的浏览器把高度设计在了文档的第一个元素中了
- // 有的浏览器把高度设计在了 body 中了
- //document.documentElement.scrollTop;// 文档的第一个元素
- //document.body.scrollTop;
- var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
- return e.clientX + scrollLeft;
- }
- },
- getPageY: function (e) {
- if (e.pageY) {
- return e.pageY;
- } else {
- var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
- return e.clientY + scrollTop;
- }
- }
- };
来源: http://www.bubuko.com/infodetail-2737066.html