js Tab导航栏切换_tab-content

作者：凡人多烦事01 | 2024-02-20 00:56:16

踩

tab-content


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		.box{
			margin: 100px auto;
			width: 500px;
		}
			.tab-list {
				height: 30px;
				line-height: 30px;
			}
			ul li {
				list-style: none;
				float: left;
				width: 20%;
				padding: 0 40px;
				border: 1px solid gray;
				cursor: pointer;
			}
			.current {
				background-color: pink;
			}
 
			.tab-content {
				height: 300px;
				border: 1px solid gray;
				border-top: 0;
			}
			.tab-content > p{
				height: 100%;
				text-align: center;
				display: none;
				
			}
			p.show {
				display: block;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="tab-list">
				<ul>
					<li class="current">1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
				</ul>
			</div>
			
			<div class="tab-content">
				<p class="show">1</p>
				<p>2</p>
				<p>3</p>
				<p>4</p>
				<p>5</p>
			</div>
			
		</div>
	</body>
	<script type="text/javascript">
        //获取所有li
		var lis = document.querySelectorAll("li");
        //获取所有内容
		var ps = document.querySelectorAll("p");
		for (var i = 0; i < lis.length; i++) {
            //给每个li设置一个index属性值
			lis[i].index = i;
			lis[i].onmousemove = function(){
				for (var j = 0; j < lis.length; j++) {
                    //以添加class类名的方式控制内容的隐藏与显示
                    //排他思维 先清空所有类名 
					lis[j].className="";
					ps[j].className="";
				}
                //给当前移入的元素添加类名
				this.className="current";
				ps[this.index].className="show";
			}
		}
		
	</script>
</html>

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】