代码片段选项卡切换特效

代码片段选项卡切换特效

添加时间:2021-03-17 18:32:11
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:选项卡切换
  • 模板颜色模板颜色:初级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

一款代码片段选项卡切换特效,点击不同的选项卡标题时,标题背景自动滑动跟随至选中项,同时选项卡内容也自动滑动切换到选中项,内容容器自动根据内容多少自适应高度。
代码片段选项卡切换特效
分类:选项卡/滑动门 > 选项卡切换 难易:初级

页面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>
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:代码片段选项卡切换特效

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.114012s