jQuery实现表格导航

开发工具与关键技术：jQuery、html、js、MVC
作者：奈何丶一梦
撰写时间：2019年03月29日
此功能是为了方便用户操作作系统，我们都知道当一个页面中，表格太多会使页面变得非常的长，不利于用户操作、而且如果同时显示多的表格，会导致页面数据繁杂，使用户难以从中筛选自己需要的数据，因此我们需要一个导航栏、当用户点击导航栏按钮时准确的显示用户需要的数据！页面截图如下：

图中4个导航按钮代表着4张不同的表格，用户点击不同的按钮下方则显示不同的表格，原表格则隐藏，下面是功能实现的逻辑与代码：
首先应该给导航按钮一个公共的类(class)与属性index（索引）值，而我给的是btn，类名随便起，但不得与其他类名一致，index属性的作用是与导航栏下方的表格的索引值对应，从而找到需要显示的表格，代码如下：

<button class="btn" index="1" style="width:150px;margin:1px; border:solid 1px #0094ff">学生表</button>
<button class="btn" index="2"  style="width:150px;margin:1px;">学生成绩表</button>
<button class="btn" index="3"  style="width:150px;margin:1px;">角色明细表</button>
<button class="btn" index="4"  style="width:150px;margin:1px;">模块表</button>

而后给每个表格定义一个父级元素，元素的类名相同，同样设置一个index 属性，属性值与导航按钮对应，并且除初始显示的表格的父级元素外，隐藏其他表格的父级元素，代码如下：

<div class="h3" style="text-align:center" index="1">
     学生表
     <table id="tabStudentImport"> 
		此处书写自己所需要的列
     </table>
</div>
<div class="h3" style="text-align:center;display:none" index="2">
     学生成绩表
     <table id="tbAchievementInfor"> 
		此处书写自己所需要的列
     </table>
</div>
<div class="h3" style="text-align:center;display:none" index="3">
     角色明细表
     <table id="tabUserType"> 
		此处书写自己所需要的列
     </table>
</div>
<div class="h3" style="text-align:center;display:none" index="4">
    模块表
     <table id="tabModular"> 
		此处书写自己所需要的列
     </table>
</div>

最后便是此功能的核心逻辑与代码了：

//获取导航按钮(由于按钮有多个，代码获取的对象便是一个数组)
var btn = $(".btn");
//通过for循环声明多个导航按钮点击事件
for (var i = 0; i < btn.length; i++) 
	{	//声明导航按钮点击事件
		btn[i].onclick = function () 
		{	  //将所有导航按钮的外边框清除
			$(".btn").css({ "border": "" });
			//隐藏所有表格
			$(".h3").hide();
			//获取当前点击的导航按钮的index值
			var index = $(this).attr("index");
			//当index值不为空（null）并且不为没有意义的数据(undefined)时显示表格index值与按钮index值相等的表格
			if (index != null && index != undefined) 
			{
			//显示与当前导航按钮相同索引的表格
			$(".h3[index=" + index + "]").show();
			//显示与当前导航按钮相同索引的表格，由于eq的索引是从0开始所以index-1才是与按钮对应的索引值，与上一句代码选择其中之一即可，区别是使用此代码不需要设置表格父级元素的index值
			$(".h3").eq(index-1).show();
			//为当前点击的导航按钮新增外边框
			$(this).css("border", "solid 1px #0094ff");
		}
	}
}

效果图如下：