分别用原生JavaScript和JQ实现Tabs切换代码，代码简单，效果美观。

tabs切换是前端工作中经常用到的，今天，我就将我自己经常用到的两种方法分享给大家。为什么会有两种呢？对于简单的项目来说，不需要引入JQ，也可以简单实现。

JavaScript实现tabs切换

言归正传，上图为证。【本例源码下载】

HTML代码布局：

<div class="tabs">
  <div class="tab" onclick="changeTab(0)">Who am I？</div>
  <div class="tab" onclick="changeTab(1)">What can I do？</div>
  <div class="tab" onclick="changeTab(2)">Where is me?</div>
</div>
<div class="tab-content">
  <div class="content" style="display: block;">Content 1</div>
  <div class="content">Content 2</div>
  <div class="content">Content 3</div>
</div>

CSS 样式表：

body{
		background: #f3f3f3;
	}
	.tabs{
		width: 50%;
		height: 36px;
		background-image: linear-gradient(270deg, #a1c4fd 0%, #c2e9fb 100%);
		position: fixed;
	    padding-top: 10px;
	    left: 50%;
	    top: 100px;
	    transform: translate(-50%, -50%);   
	    border-radius: 15px 15px 0px  0px ;
	}
	.tabs div{
		float: left;
		background: #f3f3f3;
		margin-left: 10px;
		padding: 8px 15px;
		width: auto;
		border-radius: 10px 10px 0px  0px ;
		font-size: 0.8rem;
		text-align: center;
		cursor: pointer;
		color: #999;
	}
	.tabs .tab.active{
		background: #fff;
		color: #000;
	}
	.tab-content{
		width: 50%;
		background: #fff;
		position: fixed;
	    padding-top: 10px;
	    left: 50%;
	    top: 150px;
	    transform: translate(-50%, -50%); 
	    border-radius:  0px  0px  10px 10px;  
	    padding: 20px;
	    box-sizing: border-box;
	}
	.tab-content .content { display: none; }

JS代码：

function changeTab(index) {
	var i, tabs, contents;		  
	tabs = document.getElementsByClassName("tab"); // 获取所有的tab
	contents = document.getElementsByClassName("content"); // 获取所有的内容区域
		 
	// 移除所有tab的激活状态
	for (i = 0; i < tabs.length; i++) {
		tabs[i].className = tabs[i].className.replace(" active", "");
	}
		  
    // 隐藏所有内容区域
	for (i = 0; i < contents.length; i++) {
		contents[i].style.display = "none";
	}
		  
	// 激活当前选中的tab
	tabs[index].className += " active";
	// 显示当前选中的内容区域
	contents[index].style.display = "block";
	}

JQ版本实现的Tabs切换

一样上图为证：【本例源码下载】

引用JQ：

因为这里要使用JQ写切换程序，所以别忘了导入库文件。我这里使用了百度CDN的版本。

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

HTML代码布局如下：

<!--这是菜单-->  
<div class="tabs">  
 <div list="0" onclick="tab(this)">我是A</div>  
 <div list="1" onclick="tab(this)">我是B</div>  
 <div list="2" onclick="tab(this)">我是C</div>  
 <div list="3" onclick="tab(this)">我是D</div>  
</div>  
 <!--这是菜单对应的内容-->  
 <div class="tab-content">  
	 <div style="display:block;" onclick="cont(this)">我是A的内容</div>  
	 <div onclick="cont(this)">我是B的内容</div>  
	 <div onclick="cont(this)">我是C的内容</div>  
	 <div onclick="cont(this)">我是D的内容</div>  
 </div>  

JQ代码如下：

     //点击菜单执行函数  使用click()方法模拟点击事件，触发下面的cont函数
	 function tab(param){ 	 
	 var sp_an=$(param).attr('list');//获取被点击菜单的list属性值（0,1,2,3）  
	 $('.tab-content').children('div').eq(sp_an).click();//点击菜单后，对应的内容被点击，从而实现展示		 
	 $(param).addClass('active'); // 给触发的菜单增加一个属性，用于表现激活样式
	 $(param).siblings().removeClass('active'); // 移除其他为激活的tab菜单     
	 }  

	 //这个函数的触发是通过点击菜单的时候触发的  
	 function cont(param){  
	 $(param).show();//被选中的内容显示  
	 $(param).siblings().hide();//没有被选中的内容隐藏 
	 $(param).siblings().removeClass('active'); 
 	} 

加入CSS样式表

可以看到，两种代码实现的效果是完全一样的。因为CSS样式代码是完全一样的。这里就不再重复发一遍了。