js Tab导航栏切换

最新推荐文章于 2023-02-25 18:30:51 发布

just_do_yet

最新推荐文章于 2023-02-25 18:30:51 发布

阅读量401

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/just_do_yet/article/details/120697831

版权

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

just_do_yet

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js Tab导航栏切换

<!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: 50...
复制链接

扫一扫