JavaScript实现tab切换

最新推荐文章于 2024-07-25 11:26:35 发布

hongchen_lian

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量746

点赞数 1

文章标签： html javascript

本文链接：https://blog.csdn.net/hongchen_lian/article/details/103892396

版权

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切换，如有不足，请评论告知！谢谢！

hongchen_lian

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现tab切换

JavaScript实现table切换实现效果代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>tab点击切换</title> <style type="text/css"> *{ margin: 0;...
复制链接

扫一扫