原生添加和删除元素class

<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
* {
padding: 0;
list-style: none;
}

.caidanli {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #ddd;
border-bottom: none;
position: relative;
z-index: 1111;
background-color: #fff;
}

.caidanli:last-child {
border-bottom: 1px solid #ddd;
}

.neirong {
height: 245px;
background-color: #fff;
width: 400px;
position: absolute;
left: 101px;
top: 0;
border: 1px solid #ddd;
text-align: center;
z-index: 10;
display: none;
}

.caidanli:hover {
padding-right: 1px;
color: #ff0000;
border-right: none;
}

.caidanul {
width: 100px;
}

.show {
display: block;
}
</style>
</head>
<body>
<div style="position:relative;">
<ul id="caidanul" class="caidanul">
<li class="caidanli">菜单一</li>
<li class="caidanli">菜单二</li>
<li class="caidanli">菜单三</li>
<li class="caidanli">菜单四</li>
<li class="caidanli">菜单五</li>
<li class="caidanli">菜单六</li>
</ul>
<div class="neirong_box">
<div class="neirong show11">内容一</div>
<div class="neirong">内容二</div>
<div class="neirong">内容三</div>
<div class="neirong">内容四</div>
<div class="neirong">内容五</div>
<div class="neirong">内容六</div>
</div>
</div>
<script>
var caidanli = document.querySelectorAll(".caidanli");
var caidanul = document.getElementById("caidanul");
var neirong = document.querySelectorAll(".neirong");
for (var i = 0; i < caidanli.length; i++) {
caidanli[i].dataset.id = i;
}
caidanul.onmouseover = function (e) {
var target = e.srcElement || e.target;
addClass(neirong[target.dataset.id], "show");
}
caidanul.onmouseout = function (e) {
var target = e.srcElement || e.target;
removeClass(neirong[target.dataset.id], "show");
}
function addClass(ele, value) {
var classAll = ele.getAttribute("class");
var classarr = classAll.split(" ");
for (var i = 0; i < classarr.length; i++) {
if (classarr[i] == value) {
return false;
}
}
ele.setAttribute("class", classAll + " " + value);
}
function removeClass(ele, value) {
var classAll = ele.getAttribute("class");
var classarr = classAll.split(" ");
for (var i = 0; i < classarr.length; i++) {
if (classarr[i] == value) {
classarr.splice(i, 1);
}
}
ele.setAttribute("class", classarr.join(" "));
}
</script>
</body>
</html>

posted @ 2016-11-30 10:39  夏天之度  阅读(226)  评论(0)    收藏  举报