选项卡功能模块

最新推荐文章于 2024-08-18 23:31:20 发布

sparrow_girl

最新推荐文章于 2024-08-18 23:31:20 发布

阅读量81

点赞数

分类专栏： HTML+CSS JS 文章标签： css html5 html

本文链接：https://blog.csdn.net/qq_51053759/article/details/119961265

版权

JS 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

HTML+CSS

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡</title>
		<style type="text/css">
			/* 清除默认样式 */
			ul,li{
				padding: 0;
				margin: 0;
			}
			ul{
				list-style: none;
			}
			#wrapper{
				width: 360px;
				height: 350px;
			}
			/* 菜单 */
			#menu{
				height: 50px;
				background-color: #aa00ff;
				color: #fff;
			}
			#menu li{
				width: 120px;
				line-height: 50px;
				text-align: center;
				float: left;
			}
			#menu li.active{
				background-color: #FFA500;
			}
			/* 内容 */
			#content div{
				height: 300px;
				background-color: antiquewhite;
				display: none;
			}
			#content div:nth-child(2){
				background-color: palegreen;
			}
			#content div.on{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<ul id="menu">
				<li class="active">新闻</li>
				<li>热点</li>
				<li>咨询</li>
			</ul>
			<div id="content">
				<div class="on">内容1</div>
				<div>内容2</div>
				<div>内容3</div>
			</div>
		</div>
		<script type="text/javascript">
			let lis=document.querySelectorAll('#menu>li')
			let divs=document.querySelectorAll('#content>div')
			for(let i=0;i<lis.length;i++){
				lis[i].addEventListener('mouseover',function(){
					for(let j=0;j<lis.length;j++){
						lis[j].className=''
						divs[j].className=''
					}
					lis[i].className='active'
					divs[i].className='on'
				})
			}
		</script>
	</body>
</html>

运行结果：

sparrow_girl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡功能模块

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>选项卡</title> <style type="text/css"> /* 清除默认样式 */ ul,li{ padding: 0; margin: 0; } ul{ list-style: none; } #wrapper{ .
复制链接

扫一扫

专栏目录