简易的tab选项卡切换

一款简易的tab选项卡切换，可以点击每个选项卡的标题来切换不同的内容，每个内容都可以自由添加不同的列表，列表有一个鼠标悬停的样式特效。

分类：选项卡/滑动门 > 列表切换难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需接入google字体，引入必要的页面样式文件，代码如下：

<link href='https://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="css/style.css">

页面的body部分，需设置好选项卡的标题和内容列表，代码如下：

<main>
  <nav>
    <ul id='main-nav'>
      <li class='status-item' id='status-all'>All</li>
      <li class='status-item' id='status-online-only'>Online</li>
      <li class='status-item' id='status-offline-only'>Offline</li>
    </ul>
  </nav>
  <form id='add-stream' onsubmit="handlers.addStreamInput(); return false;">
    <input type='text' id='add-stream-input' placeholder='Add Stream'/>
  </form>
  <div id='stream-list'>
    <ul id='online-stream-list'></ul>
    <ul id='offline-stream-list'></ul>
  </div>
</main>

页面的底部，需远程调用jQuery库，并引入必要的JS文件，代码如下：

<script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
<script src='https://use.fontawesome.com/0f2da01256.js'></script>
<script type="text/javascript" src="js/index.js"></script>