<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body, div, p {
margin: 0;
padding: 0
}
.tabbedPanels {
width: 500px;
margin: 10px auto;
}
ul.tabGroup {
list-style: none;
height: 30px;
line-height: 30px;
overflow: hidden;
margin: 0;
padding: 0;
}
li.tab {
width: 70px;
margin-left: 20px;
background-color: aliceblue;
font-size: 16px;
float: left;
text-align: center;
cursor: pointer;
}
li.selectedTab {
background-color: aqua;
font-weight: bold;
}
div.contentGroup {
overflow: hidden;
clear: both
}
div.content {
height: 400px;
background-color: aqua;
display: none;
padding: 10px;
}
div.selectedContent {
display: block;
}
/*高亮*/
.promoted {
color: red;
font-weight: bold
}
</style>
</head>
<body>
<!--选项卡一-->
<div class="tabbedPanels">
<ul class="tabGroup">
<li class="tab selectedTab">选项1</li>
<li class="tab">选项2</li>
<li class="tab promoted">选项3</li>
<li class="tab">选项4</li>
<li class="tab">选项5</li>
</ul>
<div class="contentGroup">
<div class="content selectedContent">内容1
<h1>课程内容</h1>
<ul>
<li>css</li>
<li>js</li>
<li>c#</li>
</ul>
</div>
<div class="content">2222222</div>
<div class="content">内容333333</div>
<div class="content">44444</div>
<div class="content">内容555555</div>
</div>
</div>
<!--选项卡二-->
<div class="tabbedPanels">
<ul class="tabGroup">
<li class="tab selectedTab">选项1</li>
<li class="tab">选项2</li>
<li class="tab promoted">选项3</li>
<li class="tab">选项4</li>
<li class="tab">选项5</li>
</ul>
<div class="contentGroup">
<div class="content selectedContent">内容1
<h1>课程内容</h1>
<ul>
<li>css</li>
<li>js</li>
<li>c#</li>
</ul>
</div>
<div class="content">内容2</div>
<div class="content">内容3</div>
<div class="content">内容4</div>
<div class="content">内容5</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript">
//var oLis = utils.getClassNames("tab", "li");
var oLis = utils.getElesBySingleClass("tab");
for (var i = 0; i < oLis.length; i++) {
oLis[i].onclick = changeTab;
}
function changeTab() {
var index = utils.getIndex(this);
utils.addClass(this,"selectedTab");
var arySiblings = utils.getSiblings(this);
for (var i = 0; i < arySiblings.length; i++) {
utils.removeClass(arySiblings[i],"selectedTab");
}
//假设点到第三个li,li-->this父亲的弟弟的儿子们的第三个元素
//父亲弟弟的所有儿子
var nodes = utils.getChildren(utils.getNext(utils.getParentNode(this)));
//父亲弟弟的第三个儿子
utils.addClass(nodes[index],"selectedContent");
//父亲弟弟的除了第三个儿子外的其他儿子
var others = utils.getSiblings(nodes[index]);
for (var i = 0; i < others.length; i++) {
utils.removeClass(others[i],"selectedContent");
}
}
</script>依赖 utils.js
/**
* Created by tangli on 2016/12/26.
* 工具包，单例模式
*/
var utils;
utils = {
/*
isOldBrowser：判断是否是老旧浏览器（is ie6 or ie7 or ie8）
用法：bool b = utils.isOldBrowser();
*/
isOldBrowser: function () {
if (window.addEventListener) {
//alert("not ie6 or ie7 or ie8");
return false;
} else if (window.attachEvent) {
//alert("is ie6 or ie7 or ie8");
return true;
}
},
/*
isOldBrowser2：判断是否是老旧浏览器（is ie6 or ie7 or ie8）
用法：bool b = utils.isOldBrowser2();
*/
isOldBrowser2: function () {
if (!+[1,]) { //is ie6 or ie7 or ie8
// alert("is ie6 or ie7 or ie8");
return true;
}
else {
// alert("not ie6 or ie7 or ie8");
return false;
}
},
/*
isIE：判断是否是IE浏览器
因为ie10-ie11的版本问题，不再支持document.all判断，所以ie判断函数要重新写了
用法：bool b = utils.isIE();
*/
isIE: function () {
if (!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
},
/*
myBrowser：获取浏览器类型以及版本
用法： var browser = utils.myBrowser();
*/
myBrowser: function () {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
/*
ie 5 Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)
ie 6 Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)
ie 7 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
ie 8 Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
ie 9 Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
ie 10 Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729)
ie 11 Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko
*/
//判断是否Opera浏览器
if (userAgent.indexOf("Opera") > -1) {
return "Opera"
}
;
//判断是否Firefox浏览器
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
}
//判断是否Chrome浏览器
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
}
//判断是否Safari浏览器
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
}
//判断是否IE5浏览器
if (userAgent.indexOf("MSIE 5") > -1) {
return "IE 5";
}
;
//判断是否IE6浏览器
if (userAgent.indexOf("MSIE 6") > -1) {
return "IE 6";
}
;
//判断是否IE7浏览器
if (userAgent.indexOf("MSIE 7") > -1) {
return "IE 7";
}
;
//判断是否IE8浏览器
if (userAgent.indexOf("MSIE 8") > -1) {
return "IE 8";
}
;
//判断是否IE9浏览器
if (userAgent.indexOf("MSIE 9") > -1) {
return "IE 9";
}
;
//判断是否IE10浏览器
if (userAgent.indexOf("MSIE 10") > -1) {
return "IE 10";
}
;
//判断是否IE11浏览器
if (userAgent.toLowerCase().indexOf("trident") > -1 && userAgent.indexOf("rv") > -1) {
return "IE 11";
}
;
},
/*
getClassNames：通过类名获取元素，兼容所有浏览器
参数：classStr:类名，tagName：标签
支持多类名
用法：var divs = utils.getClassNames('tabs_div' , 'div');
*/
getClassNames: function (classStr, tagName) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(classStr)
} else {
var nodes = document.getElementsByTagName(tagName), ret = [];
for (var i = 0; i < nodes.length; i++) {
if (this.hasClass(nodes[i], classStr)) {
ret.push(nodes[i])
}
}
return ret;
}
},
/*
getElesByClass：通过类名获取元素，兼容所有浏览器
参数：classStr:类名
这个方法的不足只能通过一个类名获取元素
用法：var divs = utils.getElesByClass('tabs_div');
*/
getElesBySingleClass: function (classStr) {
// var reg = /(^| )abc( |$)/; 写死的正则
var reg = new RegExp("(^| )" + classStr + "( |$)"); //动态创建
var a = [];
var eles = document.body.getElementsByTagName("*");
for (var i = 0; i < eles.length; i++) {
var ele = eles[i];
if (reg.test(ele.className)) {
a.push(ele);
}
}
return a;
},
/*
getElesByClass：通过类名获取元素，兼容所有浏览器
参数：classStr:类名 eles 筛选范围（document.getElementsByTagName("*")）
支持多类名获取元素,类名不分先后
用法：
查询样式 既有promoted 又有 cd 又有 gif 的元素（'promoted cd gif'）
var eles = document.getElementsByTagName("*")
eles = utils.getElesByClass('promoted',eles);
eles = utils.getElesByClass('cd',eles);
eles = utils.getElesByClass('gif',eles);
*/
getElesByClass: function (classStr, eles) {
var reg = new RegExp("(^| )" + classStr + "( |$)"); //动态创建
var a = [];
for (var i = 0; i < eles.length; i++) {
var ele = eles[i];
if (reg.test(ele.className)) {
a.push(ele);
}
}
return a;
},
/*
getElesByClassPlus：通过类名获取元素，兼容所有浏览器
参数：classStr:类名 eles 筛选范围（document.getElementsByTagName("*")）
支持多类名获取元素,类名不分先后
用法：
查询样式 既有promoted 又有 cd 又有 gif 的元素（'promoted cd gif'）
var eles = document.getElementsByTagName("*")
eles = utils.getElesByClassPlus('promoted cd gif',eles);
*/
getElesByClassPlus: function (classStr, eles) {
classStr = this.regTrim(classStr);
var arr = classStr.split(/\s+/); //这个正则表达式是因为class可以有多个,判断是否包含
for (var i = 0; i < arr.length; i++) {
eles = this.getElesByClass(arr[i], eles);
}
return eles;
},
/*
regTrim：去除字符串中多余的空格
参数：str:要去空格的字符串
用法：var str = utils.regTrim(str);
*/
regTrim: function (str) {
var regTrim = /^ +| +$/g;
str = str.replace(regTrim, "");
var regTrim2 = / {2,}/g;
str = str.replace(regTrim2, " ");
return str;
},
/*
getElementsByClassName：通过类名获取元素，兼容所有浏览器
参数：classStr:类名
支持多类名获取元素,类名不分先后
用法：
查询样式 既有promoted 又有 cd 又有 gif 的元素（'promoted cd gif'）
var eles = utils.getElementsByClassName('promoted cd gif');
*/
getElementsByClassName: function (classStr) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(classStr);
}
classStr = this.regTrim(classStr);
var arr = classStr.split(/\s+/); //这个正则表达式是因为class可以有多个,判断是否包含
eles = document.body.getElementsByTagName("*")
for (var i = 0; i < arr.length; i++) {
eles = this.getElesByClass(arr[i], eles);
}
return eles;
},
addClass: function (ele, classStr) {
//var reg = /(^| )abc( |$)/;
var reg = new RegExp("(^| )" + classStr + "( |$)");
if (!reg.test(ele.className)) {
ele.className += " " + classStr;
}
},
removeClass: function (ele, classStr) {
var reg = new RegExp("(^| )" + classStr + "( |$)", "g");
ele.className = ele.className.replace(reg, " "); //注意后面是空格
},
/*
hasClass：判断元素，是否含有某个类
参数：classStr:类名，ele：元素
用法：bool b = utils.hasClass(ele , 'tabs_div');
*/
hasClass: function (ele, classStr) {
//空格分割
var arr = ele.className.split(/\s+/); //这个正则表达式是因为class可以有多个,判断是否包含
for (var i = 0; i < arr.length; i++) {
if (arr[i] == classStr) {
return true;
}
}
return false;
},
/*
listToArray：将类数组转化成数组，兼容所有浏览器
参数：listArray:类数组
用法：var ary = utils.listToArray(lis);
*/
listToArray: function (listArray) {
var ary = [];
try {
// 通过call方法改变slice中this的指向，克隆出类数组中的元素
ary = Array.prototype.slice.call(listArray, 0);
}
catch (e) {
//ie下...
// 循环把类数组中的元素放到数组中
for (var i = 0; i < listArray.length; i++) {
ary[ary.length] = listArray[i];
}
}
return ary;
},
/*
toJSON：把JSON格式字符串转换成JSON对象
参数：str JSON格式字符
用法：var obj = utils.toJSON(str);
* */
toJSON: function (str) {
/*if ("JSON" in window) {
return JSON.parse(str);
} else {
//ie 6 7
return eval("(" + str + ")");
}*/
return "JSON" in window ? JSON.parse(str) : eval("(" + str + ")");
},
/*
toJSONString：Json对象转字符串方法
参数：obj JSON对象
用法：var str = utils.toJSONString(obj);
* */
toJSONString: function (obj) {
var S = [];
for (var item in obj) {
obj[item] = typeof obj[item] == 'string' ? '"' + obj[item] + '"' : (typeof obj[item] == 'object' ? this.toJSONString(obj[item]) : obj[item]);
S.push(item + ':' + obj[item]);
}
return '{' + S.join(',') + '}';
},
/*
* avgFn1:输入一组数字求平均数，保留2位小数
* 参数：10, 10, 9, 8, 1...
* 用法：var avg = utils.avgFn1(10, 10, 9, 8, 1)
*/
avgFn1: function () {
//1.把arguments 类数组转换成数组
var ary = [];
for (var i = 0; i < arguments.length; i++) {
ary[ary.length] = arguments[i];
}
//2.给数组进行排序，然后去掉首尾
ary.sort(function (a, b) {
return a - b;
})
ary.shift(); //去首
ary.pop(); //去尾
//3.求和求平均
var total = null;
for (var i = 0; i < ary.length; i++) {
total += ary[i];
}
return (total / ary.length).toFixed(2);
},
/* 优化
* avgFn2:输入一组数字求平均数，保留2位小数
* 参数：10, 10, 9, 8, 1...
* 用法：var avg = utils.avgFn2(10, 10, 9, 8, 1)
*/
avgFn2: function () {
//1.把arguments 类数组转换成数组（用类数组转换成数组的优化）
/*var ary = [];
for (var i = 0; i < arguments.length; i++) {
ary[ary.length] = arguments[i];
}*/
var ary = Array.prototype.slice.call(arguments, 0);
//2.给数组进行排序，然后去掉首尾
ary.sort(function (a, b) {
return a - b;
}).shift(); //去首
ary.length--; //去尾
//3.求和求平均 优化
return (eval(ary.join("+")) / ary.length).toFixed(2);
},
/* 优化
* avgFn3:输入一组数字求平均数，保留2位小数
* 参数：10, 10, 9, 8, 1...
* 用法：var avg = utils.avgFn3(10, 10, 9, 8, 1)
*/
avgFn3: function () {
//1.把arguments 类数组转换成数组（用类数组转换成数组的优化）
/*var ary = [];
for (var i = 0; i < arguments.length; i++) {
ary[ary.length] = arguments[i];
}*/
var ary = Array.prototype.slice.apply(arguments, [0]);
//2.给数组进行排序，然后去掉首尾
ary.sort(function (a, b) {
return a - b;
}).shift(); //去首
ary.length--; //去尾
//3.求和求平均 优化
return (eval(ary.join("+")) / ary.length).toFixed(2);
},
/* 深度优化
* avgFn4:输入一组数字求平均数，保留2位小数
* 参数：10, 10, 9, 8, 1...
* 用法：var avg = utils.avgFn4(10, 10, 9, 8, 1)
*/
avgFn4: function () {
//类数组转成数组，在给数组进行排序
[].sort.call(arguments, function (a, b) {
return a - b;
});
[].shift.call(arguments); //去首
[].pop.call(arguments); //去尾
//求和求平均 优化
//console.info(arguments.length)
return (eval([].join.call(arguments, "+")) / arguments.length).toFixed(2);
},
/*
* regExec:正则捕获符合规则的所有结果,原理利用改变正则的懒惰性
* 参数：reg：正则表达式/g str 要捕获结果的字符串
* 用法：var ary = utils.regExec(reg,str)
*/
regExec: function (reg, str) {
var ary = [];
var res = reg.exec(str);
while (res) {
ary.push(res.shift());
res = reg.exec(str);
}
return ary;
},
/*
* strMatch:字符串捕获符合正则规则的所有结果
* 局限：当reg存在分组的情况下，str.match(reg)就无法处理了
* 参数：reg：正则表达式/g str 要捕获结果的字符串
* 用法：var ary = utils.strMatch(reg,str)
*/
strMatch: function (reg, str) {
var ary = str.match(reg);
return ary;
},
/*
* getCss:获取某个元素的某个具体css结果
* 参数：ele：元素 attr css属性名称
* 用法：var obj = utils.getCss(ele,attr)
*/
getCss: function (ele, attr) {
if (typeof getComputedStyle == "function") {
return getComputedStyle(ele, null)[attr];
} else {
//ie 6 7 8
return ele.currentStyle[attr];
}
},
/*
获取任意元素距离body的偏移,相对与document的偏移量
通过向上迭代offsetParent,可以计算出相对于document的偏移量，也就是相对与页面的偏移量。
此方法的问题:
1)对于使用表格和内嵌框架布局的页面，由于不同浏览器实现元素方式的差异，得到的结果就不精确了。
2)每次都需要一级一级向上查找offsetParent，效率太低。
*/
getOffsetSum: function (ele) {
var top = 0, left = 0;
while (ele) {
if (window.navigator.userAgent.indexOf("MSIE 8") > -1) {
top += ele.offsetTop;
left += ele.offsetLeft;
} else {
//在标准浏染器下要加上边框
top += ele.offsetTop + ele.clientTop; //ele.clientTop 是上边框的宽
left += ele.offsetLeft + ele.clientLeft; //ele.clientLeft 是左边框的宽
}
ele = ele.offsetParent;
}
return {
top: top,
left: left
}
},
/*
此方法直接通过getBoundingClientRect()方法获得相对于视口的偏移量，
加上页面的滚动量，减去clientTop，clientLeft (IE8及更低版本浏览器将(2,2)作为起点坐标，
所以要将值减去起点坐标，其他浏览器都是已(0,0)作为起点坐标)。
getBoundingClientRect()方法支持IE,ff3+,safari4+,Orear9,5,Chrome.
*/
getOffsetRect: function (ele) {
var box = ele.getBoundingClientRect();
var body = document.body,
docElem = document.documentElement;
//获取页面的scrollTop,scrollLeft(兼容性写法)
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop,
scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var clientTop = docElem.clientTop || body.clientTop,
clientLeft = docElem.clientLeft || body.clientLeft;
var top = box.top + scrollTop - clientTop,
left = box.left + scrollLeft - clientLeft;
return {
//Math.round 兼容火狐浏览器bug
top: Math.round(top),
left: Math.round(left)
}
},
/*
* 获取任意元素距离body的偏移
* 对于支持getBoundingClientRect()方法的浏览器使用getOffsetRect()方法，不支持的则使用getOffsetSum()方法
* 参数：ele
* 用法：var obj = utils.getOffset(ele)
*/
getOffset: function (ele) {
if (ele.getBoundingClientRect) {
return this.getOffsetRect(ele);
} else {
return this.getOffsetSum(ele);
}
},
/*
* 获取任意元素距离父级元素的偏移
* 注意父级元素css要加上position
* 参数：ele
* 用法：var obj = utils.getRelativeOffset(ele)
*/
getRelativeOffset: function (ele) {
var top = ele.offsetTop;
var left = ele.offsetLeft;
return {
top: top,
left: left
}
},
/*
* getEleClientWidthAndHeight:计算元素本身的宽高
* 参数：ele：元素 包含元素的padding
* clientWidth，clientHeight：元素可视区域尺寸，内边距以内的减去滚动条自身尺寸后的尺寸，即padding + width(height) - 滚动条自身尺寸，
* 用法：var obj = utils.getEleClientWidthAndHeight(ele)
*/
getEleClientWidthAndHeight: function (ele) {
var w = ele.clientWidth;
var h = ele.clientHeight;
return {width: w, height: h}
},
/*
* getEleClientWidthAndHeightContainBorder:计算元素本身的宽高包含边框
* 参数：ele：元素 包含元素的padding
* offsetWidth，offsetHeight：元素包含边框以内的尺寸，包含滚动条自身尺寸，即border + padding + width(height)，
* */
getEleClientWidthAndHeightContainBorder: function (ele) {
var w = ele.offsetWidth;
var h = ele.offsetHeight;
return {width: w, height: h}
},
/*
* getIndex:获取一个元素在同个父级元素下的排行（索引）
* 参数：ele：元素
* 用法：var index = utils.getIndex(ele)
* */
getIndex: function (ele) {
var index = 0;//假设当前的tab排行是0，就是假设成老大
var p = ele.previousSibling; //获取前一个兄弟节点
while (p) {
if (p.nodeType === 1) {//并且哥哥是元素
index++;//则让他的排行递进一次
}
p = p.previousSibling; //再次获取前一个兄弟节点
}
//循环结束获取到当前点击tab的索引值
return index;
},
/*
* getParentNode:获取一个元素的父级元素
* 参数：ele：元素
* 用法：var parent = utils.getParentNode(ele)
* */
getParentNode: function (ele) {
var parent = ele.parentNode;
return parent;
},
/*
* getChildren:获取一个元素的子级元素
* 参数：ele：元素
* 用法：var children = utils.getChildren(ele)
* */
getChildren: function (ele) {
// if (document.all) { //ie 6 7 8 怪癖检测
if (typeof ele.nextElementSibling != "object") {
var a = [];
var childNodes = ele.childNodes;
for (var i = 0; i < childNodes.length; i++) {
var child = childNodes[i];
if (child.nodeType === 1) {
a.push(child);
}
}
return a;
} else {
return ele.children;
}
},
/*
* getSiblings:获取一个元素的兄弟元素
* 参数：ele：元素
* 用法：var arySiblings = utils.getSiblings(ele)
* */
getSiblings: function (ele) {
var parent = this.getParentNode(ele);
var nodes = parent.childNodes;
var aSiblings = [];
for (var i = 0; i < nodes.length; i++) {
if (nodes[i] != ele && nodes[i].nodeType === 1) {
aSiblings.push(nodes[i]);
}
}
return aSiblings;
},
/*
* getSiblings2:获取一个元素的兄弟元素
* 参数：ele：元素
* 用法：var arySiblings = utils.getSiblings2(ele)
* */
getSiblings2: function (ele) {
var aSiblings = [];
var p = ele.previousSibling;
while (p) {
if (p.nodeType === 1) { //元素节点
aSiblings.unshift(p); //与push相反
}
p = p.previousSibling;
}
var n = ele.nextSibling;
while (n) {
if (n.nodeType === 1) { //元素节点
aSiblings.push(n); //unshift
}
n = n.nextSibling;
}
return aSiblings;
},
/*
* getPrev:获取一个元素的相邻的前一个兄弟元素
* 参数：ele：元素
* 用法：var prev = utils.getPrev(ele)
* */
getPrev: function (ele) {
if (ele.previousElementSibling) {
return ele.previousElementSibling;
} else {
// ie 6 7 8
var p = ele.previousSibling;
while (p) {
if (p.nodeType === 1) {
return p;
}
p = p.previousSibling;
}
return null;
}
},
/*
* getNext:获取一个元素的相邻的后一个兄弟元素
* 参数：ele：元素
* 用法：var next = utils.getNext(ele)
* */
getNext: function (ele) {
if (ele.nextElementSibling) {
return ele.nextElementSibling;
} else {
var p = ele.nextSibling;
while (p) {
if (p.nodeType === 1) {
return p;
}
p = p.nextSibling;
}
return null;
}
},
/*
* getPrevSiblings:获取一个元素之前的兄弟元素
* 参数：ele：元素
* 用法：var arySiblings = utils.getPrevSiblings(ele)
* */
getPrevSiblings: function (ele) {
var aSiblings = [];
var p = ele.previousSibling;
while (p) {
if (p.nodeType === 1) { //元素节点
aSiblings.unshift(p); //与push相反
}
p = p.previousSibling;
}
return aSiblings;
},
/*
* getNextSiblings:获取一个元素之后的兄弟元素
* 参数：ele：元素
* 用法：var arySiblings = utils.getNextSiblings(ele)
* */
getNextSiblings: function (ele) {
var aSiblings = [];
var n = ele.nextSibling;
while (n) {
if (n.nodeType === 1) { //元素节点
aSiblings.push(n); //unshift
}
n = n.nextSibling;
}
return aSiblings;
},
/*
* closest:获取一个元素相邻的兄弟
* 参数：ele：元素
* 用法：var arySiblings = utils.closest(ele)
* */
closest: function (ele) {//找相邻的弟弟和哥哥
return [this.getPrev(ele), this.getNext(ele)];
}
};
扫一扫
8103
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
