html页面中a标签,只要当前点击的a标签换样式
2018-06-19
利用元素的className 属性设置一个class名
访问他的所有父元素的子元素,如果这个子元素不是点击的元素就把class设置成以前的值
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
a{
display:inline-block;
margin-right:10px ;
margin-bottom:5px ;
width: 100px;
height: 50px;
}
.a{ background:blue ;}
.b{ background: red;}
</style>
</head>
<body>
<a class="a">class="a"</a>
<a class="a">class="a"</a>
<a class="a">class="a"</a>
<a class="a">class="a"</a>
<a class="a">class="a"</a>
<a class="a">class="a"</a>
<a class="a">class="a"</a>
<a class="a">class="a"</a>
<a class="a">class="a"</a>
<script type="text/javascript">
var a=document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
a[i].onclick=function(){
ock(event);
}
}
function ock(e){
var a=e.target;
var child=a.parentNode.childNodes;
a.className="b";
a.innerText="class=\"b\""
for (var i = 0; i < child.length; i++) {
if(child[i]!=a){
child[i].className="a";
child[i].innerText="class=\"a\""
}
}
}
</script>
</body>
</html>