JavaScript基础教程 tab切换效果详解-职坐标

JavaScript基础教程 tab切换效果详解

沉沙 2018-09-18 来源：阅读 550 评论 0

摘要：本篇教程介绍了JavaScript基础教程 tab切换效果详解，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

本篇教程介绍了JavaScript基础教程 tab切换效果详解，希望阅读本篇文章以后大家有所收获，帮助大家对JavaScript的理解更加深入。

<!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="//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;
        }
    }

};