左右滑动选项卡功能（第一课）

by

在网页设计，选项卡给人们体验不同的东西，是优美而且美观的特点。作为网页设计人员或者前端人员都必须学会jquery和css，因为制作选项卡功能是网页设计的基本功。

我的思路

Owl Carousel轮播图插件是国外最常用的工具，能够满足我们的需求开发。我的思路主要是用Owl Carousel轮播图插件来改造带有左右滑动选项卡功能，这个过程可能会碰到瓶颈的问题，可以一步步地解决小的问题。

下载好Owl Carousel轮播图插件，解压本地文件，然后MAMP PRO服务器开启，在谷歌浏览器测试一下。写前端代码的话，可以一边写一边看浏览器，慢慢的敲一下代码。

大家可以自行去下载http://owlgraphic.com/owlcarousel/

接下来我常用编辑器的是Sublime Text和Atom,你们可以根据自己习惯用哪个编辑器，重要的是适合就用行了。

1.首先建立新的文件夹，可以随便写什么的，我就写文件夹的名称是ui，再建立index.html文件

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <!--owl 轮播图插件-->
  <link rel="stylesheet" href="owl.carousel.min.css">
  <!--默认css文件-->
  <link rel="stylesheet" href="style.css">
</head>
<body>

<h2>jquery带有左右滑动选项卡功能</h2>

<div class="component">
 <!--略下面内容-->

</div>
<!--加载jquery文件-->
<script type="text/javascript" src="jquery.min.js"></script>
<!--owl carousel插件的js文件-->
<script type="text/javascript" src="owl.carousel.min.js"></script>

</body>
</html>

选项卡功能的文件目录包括主要是：

index.html  //首页文件
style.css  //默认css文件
owl.carousel.min.css  //owl轮播插件的css文件
jquery.min.js  //jquery文件是必须的
owl.carousel.min.js  //owl轮播插件的js文件

选项卡导航条html文件：

<!--component 开始-->
<div class="component">
 <!--略下面内容-->
 <!--选项卡导航条开始-->
 <div class="thumbnails-wrapper">
    <div class="collapse-button">
      <div class="icon"></div>
    </div>
    <div class="counter">
      <span class="current-item"></span>/<span class="max-items"></span>
    </div>
    <!--owl-carousel 开始-->
    <div id="thumbnails" class="owl-carousel">
      <div class="item active">
        <a href="">全部</a>
      </div>
      <div class="item">
        <a href="">白羊座</a>
      </div>
      <div class="item">
        <a href="">金牛座</a>
      </div>
      <div class="item">
        <a href="">双子座</a>
      </div>
      <div class="item">
        <a href="">巨蟹座</a>
      </div>
      <div class="item">
        <a href="">狮子座</a>
      </div>
      <div class="item">
        <a href="">处女座</a>
      </div>
      <div class="item">
        <a href="">天秤座</a>
      </div>
      <div class="item">
        <a href="">天蝎座</a>
      </div>
      <div class="item">
        <a href="">射手座</a>
      </div>
      <div class="item">
        <a href="">摩羯座</a>
      </div>
      <div class="item">
        <a href="">水瓶座</a>
      </div>
      <div class="item">
        <a href="">双鱼座</a>
      </div>
    </div>
    <!--owl-carousel 结束-->
  </div>
<!--选项卡导航条结束-->
</div>
<!--component 结束-->