js简单的排他功能

最新推荐文章于 2023-10-24 17:55:40 发布

释xin

最新推荐文章于 2023-10-24 17:55:40 发布

阅读量948

点赞数 2

文章标签： html css html5

本文链接：https://blog.csdn.net/Smallwhitestrive/article/details/120646907

版权

JavaScript DOM操作事件处理样式切换排他逻辑

关键词由CSDN通过智能技术生成

做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>

简单的排他功能就做好了，好的，文章到这就结束啦，拜拜咯🎈

释xin

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js简单的排他功能

做js的排他功能简单的思路就是：找到当前点击的元素去除所有元素样式给当前点击的元素设置样式OK，思路有了，我们开干，一起看下面的代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0;
复制链接

扫一扫