JavaScript实现tab切换

JavaScript实现tab切换

实现效果

在这里插入图片描述

代码如下
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab点击切换</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			ul{
				display: flex;
				justify-content: space-around;
				text-align: center;
				font-size: 20px;
				height: 60px;
				line-height: 60px;
			}
			li{
				flex: 1;
			}
			.active{
				border-bottom: 2px solid #FF0000;
			}
			.conter{
				display: none;
			}
			.conter.show{
				display: inline;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<ul>
				<li class="active">目录1</li>
				<li>目录2</li>
				<li>目录3</li>
				<li>目录4</li>
			</ul>
			<div class="conter show">内容1</div>
			<div class="conter">内容2</div>
			<div class="conter">内容3</div>
			<div class="conter">内容4</div>
		</div>
		<script type="text/javascript">
			window.onload = function(){
				//获取元素
				var oli = document.getElementsByTagName("li");
				var odiv = document.getElementsByClassName("conter");
				for(var i = 0;i < oli.length;i ++){
					//保存i
					oli[i].index = i;
					//对应标题点击事件
					oli[i].onclick = function(){
						//移除class
						for(var j = 0;j < oli.length;j ++){
							oli[j].classList.remove("active");
							odiv[j].classList.remove("show");
						}
						//点击选中添加class,改变对应样式
						oli[this.index].classList.add("active");
						odiv[this.index].classList.add("show");
					}
				}
			}
		</script>
	</body>
</html>

简单的代码实现table切换,如有不足,请评论告知!谢谢!

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值