代码片段选项卡切换特效

一款代码片段选项卡切换特效，点击不同的选项卡标题时，标题背景自动滑动跟随至选中项，同时选项卡内容也自动滑动切换到选中项，内容容器自动根据内容多少自适应高度。

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

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

页面head部分，需对接谷歌字体，远程调用一个CSS样式文件，并引入本地的样式文件，代码如下：

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/dracula.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，需设置好选项卡标题及对应内容，代码如下：

<div class="Container">
  <nav>
    <div class="current"></div>
    <a href="#one" class="active">Ruby</a>
    <a href="#two">Python</a>
    <a href="#three">Node</a>
    <a href="#four">Go</a>
  </nav>
  <div class="Contents">
    <div class="Content" id="one">
    <pre><code>require "stripe"
Stripe.api_key = "..."

Stripe::Charge.create(
  :amount => 2000,
  :currency => "eur",
  :source => "tok_mastercard", # obtained with Stripe.js
  :description => "Charge for hello@thomascullen.io"
)</code></pre>
  </div>
  <div class="Content" id="two">
    <pre class="python"><code>import stripe
stripe.api_key = "..."

stripe.Charge.create(
  amount=2000,
  currency="eur",
  source="tok_amex", # obtained with Stripe.js
  description="Charge for madison.wilson@example.com"
)</pre></code>
  </div>
  <div class="Content" id="three">
    <pre><code>var stripe = require("stripe")(
  "..."
);

stripe.charges.create({
  amount: 2000,
  currency: "eur",
  source: "tok_visa", // obtained with Stripe.js
  description: "Charge for jayden.martinez@example.com"
}, function(err, charge) {
  // asynchronously called
});</code></pre>
  </div>
  <div class="Content" id="four">
    <pre><code>stripe.Key = "..."

chargeParams := &stripe.ChargeParams{
  Amount: 2000,
  Currency: "eur",
  Desc: "Charge for benjamin.wilson@example.com",
}

// obtained with Stripe.js
chargeParams.SetSource("tok_mastercard")
ch, err := charge.New(chargeParams)</code></pre>
  </div>
  </div>
</div>

页面的底部，远程调用多个JS文件，并引入本地JS文件，代码如下：

<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/ruby.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/python.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/go.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/javascript.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>