分别用原生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;