原生js实现tab选项卡切换功能

前端 631
1年前
网页制作中,经常会用到 tab 切换功能,本文通过原生的 JS 实现 tab 切换。  

<!DOCTYPE html>
<html>
<head>
	<title>tab 选项卡</title>
	<meta charset="utf-8">
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<style type="text/css">
		li{list-style: none;}
		*{
			margin:0px;
			padding:0px;
		}
		#tab{
			position: relative;
			width: 600px;
			height: 400px;
			margin:50px auto;
			border: 1px solid #ccc;
		}
		.list_nav{
			float: left;
			width: 199px;
			height: 50px;
			border-right: 1px solid red;
			background-color: #eee;
			text-align: center;
			line-height: 50px;
		}
		.active{
			background-color: red;
		}
		.tab_nav{
			display: none;
			position: absolute;
			top:50px;
			width: 100%;
			height: 350px;
		}
		.on{
			display: block;
		}
	</style>
</head>
<body>	
	<div id="tab">
		<ul class="list">
			<li class="list_nav active">1</li>
			<li class="list_nav">2</li>
			<li class="list_nav">3</li>
		</ul>
		<ul class="tab">
			<li class="tab_nav on">1</li>
			<li class="tab_nav">2</li>
			<li class="tab_nav">3</li>
		</ul>
	</div>
	<script>
		//js 实现 tab 选项卡交互
		//方法一:
		var aList=document.getElementsByClassName("list_nav"),
			aTab=document.getElementsByClassName("tab_nav"),
			index=0; //用来存储上一次的值
		for(var i=0;i<aList.length;i++){
			//闭包加函数自执行
			(function(i){
				aList[i].onclick=function(){
					aList[index].classList.remove("active");
					aTab[index].classList.remove("on");
					index=i;
					aList[index].classList.add("active");
					aTab[index].classList.add("on");
				}
			})(i);
		}
		//方法二:
		var aList=document.getElementsByClassName("list_nav"),
		 	aTab=document.getElementsByClassName("tab_nav");
		 	for(var i=0;i<aList.length;i++){
		 		aList[i].index=i;
		 		//清除所有 li 的 class
		 		aList[i].onclick=function(){
			 		for(var i=0;i<aList.length;i++){
			 			aList[i].classList.remove("active");
			 			aTab[i].classList.remove("on");
			 		}
			 		//给当前 li 添加样式
			 		aList[this.index].classList.add("active");
			 		aTab[this.index].classList.add("on");
		 		}
		 	}
	</script>

</body>
</html>

本文来源于:CSDN 博主「小傻子 lan」
标签: ,

相关文章

WordPress 自动为新文章添加已使用过的历史标签非插件版

每当我们写文章的时候,都需要手动给 WordPress 文章添加标签,这样既能给访问者明确这篇文章的…

523
6个月前
评论神器一键自动填写昵称、邮箱和网址

适用WordPress、Typecho、ZBlog、Emlog、多说等平台的评论神器 javascr…

507
7个月前
WordPress 利用sql命令批量修改友情链接全部在新窗口打开

登陆数据库,然后执行 sql 命令: UPDATE Wp_links SET link_target…

329
7个月前

共有0条评论

评论本文