做js的排他功能简单的思路就是:
- 找到当前点击的元素
- 去除所有元素样式
- 给当前点击的元素设置样式
OK,思路有了,我们开干,一起看下面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box {
width: 400px;
height: 300px;
position: absolute;
text-align: center;
border: 2px solid;
}
.hd span {
display: inline-block;
width: 96px;
height: 90px;
line-height: 90px;
background: pink;
}
.hd .current {
background: blanchedalmond;
}
.bd ul {
list-style: none;
}
.bd ul li {
display: none;
width: 400px;
height: 200px;
background: aqua;
}
.bd ul .current {
display: block;
}
</style>
</head>
<body>
<div id="box" class="box">
<div class="hd">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="bd">
<ul>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
// 获取所有的div和里面的span、li子元素
var hd = document.getElementById("box").getElementsByTagName('div')[0];
var bd = document.getElementById("box").getElementsByTagName('div')[1];
var spans = hd.getElementsByTagName('span');
var lis = bd.getElementsByTagName('li');
for(var i = 0; i < spans.length; i++) {
// 给span元素加一个唯一标识index,并添加点击事件
spans[i].setAttribute('index', i);
spans[i].onclick = function() {
// 先移除所有span样式
for(var j = 0; j < spans.length; j++) {
spans[j].removeAttribute('class');
}
// 给当前点击的span设置样式
this.className = 'current';
// 根据唯一标识获取当前点击元素的下标
var num = this.getAttribute('index');
// 先移除所有span样式
for(var k = 0; k < lis.length; k++) {
lis[k].removeAttribute('class');
}
// 根据唯一标识给li添加样式
lis[num].className = 'current';
}
}
</script>
</html>
简单的排他功能就做好了,好的,文章到这就结束啦,拜拜咯🎈