＜JS操作Dom应用-选项卡＞

最新推荐文章于 2021-05-22 15:12:38 发布

好先生·

最新推荐文章于 2021-05-22 15:12:38 发布

阅读量104

点赞数

分类专栏： Dom操作文章标签： dom

本文链接：https://blog.csdn.net/weixin_45540964/article/details/111240687

版权

Dom操作专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		.app {
			width: 400px;
			/*border: 1px solid #000;*/
		}
		.app .nav {
			display: flex;
			justify-content: space-between;
		}
		.nav span {
			display: inline-block;
			border: 1px solid pink;
			text-align: center;
			padding: 20px;
		}
		.nav span.choose {
			color: green;
		}
		.app .content {
			margin-top: 10px;
			border: 1px solid skyblue;
			/*height: 300px;*/
		}
		.app .content div {
			display: none;
		}
		.app .content div.choose {
			display: block;
		}
		.app .content div article {
			margin-left: 30px;
		}
		.app .content div img {
			width: 100%;
			height: 100px;
		}
	</style>
</head>
<body>
	<div class="app">
		<div class="nav" id="nav1">
			<span>精选</span>
			<span>社会</span>
			<span>娱乐</span>
			<span>生活</span>
			<span>体育</span>
		</div>
		<div class="content" id="cont1">
			<div>
				<img src="/Users/macbookair/Desktop/picture/22.jpg" alt="#">
				<article>
					<p>31省新增18例确诊 本土1例在天津新闻</p>
					<p>重庆永川吊水洞煤矿事故23人遇难关注</p>
					<p>公厕竟然也用上了“人脸识别”？热议</p>
					<p>国家出手 撤销了这15个化妆品 推荐</p>
					<p>这一巨头被曝出了“惊天丑闻”！资讯</p>
					<p>河南的那大雪是一场“假雪”？</p>
				</article>
			</div>
			<div>
				<img src="" alt="#">
				<article>
					<p>新娘一下婚车狂奔消失 ！宾客当场傻眼</p>
					<p>这家面馆 网友排队说要去捧场！！</p>
					<p>丁真当起了图书管理员？真相是……</p>
					<p>冬天下河救人的好人 真有好报！ </p>
					<p>“外卖小哥”两年发生54次交通事故？</p>
					<p>女子微信聊天“随口”一句话损失6万元</p>
				</article>
			</div>
			<div>娱乐新闻内容</div>
			<div>生活新闻内容</div>
			<div>体育生活内容</div>
		</div>
	</div>
	<script type="text/javascript">
		var sp1=document.getElementById('nav1').getElementsByTagName('span');
		var dv1=document.getElementById('cont1').getElementsByTagName('div');
		console.log(sp1[0]);
		sp1[0].className='choose';
		dv1[0].className='choose';
		for (var i=0; i<sp1.length; i++) {
			sp1[i].index=i;
			sp1[i].onclick=function() {
				var j=0;
				while ( sp1[j] ) {
					sp1[j].className="";
					dv1[j].className="";
					console.log(j);
					j++;
				}
				sp1[this.index].className='choose';
				dv1[this.index].className='choose';
			};
		}
	</script>
</body>
</html>

好先生·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
＜JS操作Dom应用-选项卡＞

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .app { width: 400
复制链接

扫一扫

专栏目录