jQuery响应式选项卡tab特效布局

使用方法：

引入css样式文件

<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->

引入jQuery库文件、插件相关JS文件

<script src="js/modernizr.js"></script> <!-- Modernizr -->

<script src="http://www.sucainiu.com/themes/cdn/jquery/jquery-1.10.2.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->

HTML结构

<div class="cd-tabs">
	<nav>
      <ul class="cd-tabs-navigation">
        <li><a data-content="inbox" class="selected" href="#0">Inbox</a></li>
        <li><a data-content="new" href="#0">New</a></li>
        <li><a data-content="gallery" href="#0">Gallery</a></li>
        <li><a data-content="store" href="#0">Store</a></li>
        <li><a data-content="settings" href="#0">Settings</a></li>
        <li><a data-content="trash" href="#0">Trash</a></li>
      </ul> <!-- cd-tabs-navigation -->
	</nav>
	<ul class="cd-tabs-content">
      <li data-content="inbox" class="selected">
          ……
      </li>
      <li data-content="new">
          ……
      </li>
      <li data-content="gallery">
          ……
      </li>
      <li data-content="store">
          ……
      </li>
      <li data-content="settings">
          ……
      </li>
      <li data-content="trash">
          ……
      </li>
	</ul> <!-- cd-tabs-content -->
</div> <!-- cd-tabs -->