js实现选项卡切换显示对应内容，按钮切换页面内容

最新推荐文章于 2023-02-06 19:42:02 发布

原创最新推荐文章于 2023-02-06 19:42:02 发布 · 9.3k 阅读

21 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#切换选项卡 #上一步切换效果 #下一步切换效果

js 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍如何使用JavaScript和jQuery实现选项卡切换显示对应内容，以及通过"上一步"、"下一步"按钮来切换页面内容。文章提供HTML和JS代码示例，展示如何在点击头部选项卡或按钮时，动态显示和隐藏不同的div，同时更新头部选项卡的选中状态。

一、点击头部选项卡切换内容
头部如图所示（懒得改文字了，直接打码上图了）
如下图所示头部有6个选项卡被选中的选项卡背景色为白色
本文只给出html和js代码样式表就不贴了
头部导航
第一个选项卡对应div的内容
在这里插入图片描述
第二个选项卡对应div的内容

可以看出是有切换内容的表格都不一样
头部选项卡代码

<div class="formHeader">
	<ul>
		<li class="headerLi headerActive">XXX</li>
		<li class="headerLi headerOff">XXX</li>
		<li class="headerLi headerOff">XXX</li>
		<li class="headerLi headerOff">XXX</li>
		<li class="headerLi headerOff">XXX</li>
		<li class="headerLi headerOff">XXX</li>
	</ul>
</div>

表格所在的div（代码就不整理了，截图如下）
在这里插入图片描述

js代码如下（记得引入jquery)

//JS实现点击选项卡切换
window.onload = function() {
	var tabLi = $(".headerLi");
	var tabDiv = $(".infoForm");

	for(var k = 0; k < tabLi.length; k++) { //对tabLi数组进行循环
		tabLi[k].index = k;
		tabLi[k].onclick = function() { //判断哪一个li标签被点击
			for(var l = 0; l < tabLi.length; l++) { //对tabLi数组进行循环
				tabLi[l].className = "headerOff"; //所有li设置不被点击状态
				tabDiv[l].className = "infoForm hide"; //所有的div内容设置为hide状态
			}
			this.className = "headerActive";
			tabDiv[this.index].className = "infoForm show";
		}
	}
}

即可实现点击选项卡切换div内容了，也就是显示对应的div，隐藏其他的div

二、点击”上一步“、”下一步“按钮切换，对应div内容要切换，还要对应头部的选项卡

在这里插入图片描述

按钮代码
在这里插入图片描述

//JS实现点击上一步切换选项卡
var tabBackBtn = $(".backBtn");

for(var m = 0; m < tabBackBtn.length; m++) { //对tabLi数组进行循环
	tabBackBtn[m].index = m;
	tabBackBtn[m].onclick = function() { //判断哪一个"上一步"按钮被点击
		for(var n = 0; n < tabLi.length; n++) { //对tabLi数组进行循环
			tabLi[n].className = "headerOff"; //所有li设置不被点击状态
			tabDiv[n].className = "infoForm hide"; //所有的div内容设置为hide状态
		}
		tabLi[this.index].className = "headerActive";
		tabDiv[this.index].className = "infoForm show";
	}
}

//JS实现点击下一步切换选项卡
var tabNextBtn = $(".submitBtn");

for(var s = 0; s < tabNextBtn.length; s++) { //对tabLi数组进行循环
	tabNextBtn[s].index = s;
	tabNextBtn[s].onclick = function() { //判断哪一个"下一步"按钮被点击
		for(var t = 0; t < tabLi.length; t++) { //对tabLi数组进行循环
			tabLi[t].className = "headerOff"; //所有li设置不被点击状态
			tabDiv[t].className = "infoForm hide"; //所有的div内容设置为hide状态
		}
		tabLi[this.index + 1].className = "headerActive";
		tabDiv[this.index + 1].className = "infoForm show";
	}
}