漂亮的jQuery Bootstrap垂直手风琴选项卡

来源:https://www.sucaihuo.com/js/3005.html 2017-09-13 23:30浏览(1769) 收藏

一款漂亮的jQuery Bootstrap垂直手风琴选项卡,可以点击选项卡上面的箭头来展开或收缩选项卡内容,3个选项卡均可任意展开或收缩。
漂亮的jQuery Bootstrap垂直手风琴选项卡
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需远程调用bootstrap样式库和font-awesome图标字体库,并设置好页面样式,代码如下:

<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
<style type="text/css">
a:hover, a:focus { text-decoration: none; outline: none; }
#accordion { padding-right: 24px; padding-left: 24px; z-index: 1; }
#accordion .panel { border: none; box-shadow: none; }
#accordion .panel-heading { padding: 0; border-radius: 0; border: none; }
#accordion .panel-title { padding: 0; }
#accordion .panel-title a { display: block; font-size: 16px; font-weight: bold; background: #e16b47; color: #f7c59f; padding: 15px 25px; position: relative; margin-left: -24px; transition: all 0.3s ease 0s; }
#accordion .panel-title a.collapsed { background: #f7c59f; color: #e16b47; margin-left: 0; transition: all 0.3s ease 0s; }
#accordion .panel-title a:before { content: ""; border-left: 24px solid #e16b47; border-top: 24px solid transparent; border-bottom: 24px solid transparent; position: absolute; top: 0; right: -24px; transition: all 0.3s ease 0s; }
#accordion .panel-title a.collapsed:before { border-left-color: #f7c59f; }
#accordion .panel-title a:after { content: "\f106"; font-family: 'FontAwesome'; position: absolute; top: 30%; right: 15px; font-size: 18px; color: #f7c59f; }
#accordion .panel-title a.collapsed:after { content: "\f107"; color: #e16b47; }
#accordion .panel-collapse { position: relative; }
#accordion .panel-collapse.in:before { content: ""; border-right: 24px solid #f7c59f; border-bottom: 18px solid transparent; position: absolute; top: 0; left: -24px; }
#accordion .panel-body { font-size: 14px; color: #333; background: #e4e4e4; border-top: none; z-index: 1; }
body{ background-color:#323232;font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;}
p { font-size:16px;text-align:justify;text-indent:2em;line-height:26px;}
</style>

页面的body部分,需设置好滑动手风琴选项卡的3个选项标题和内容,代码如下:

<div class="demo" style="padding: 1em 0;">
  <div class="container">
    <div class="row">
      <div class="col-md-offset-3 col-md-6">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
              <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 要求 </a> </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
              <div class="panel-body">
                <p>第一个阶段,是做出要求,对宇宙发出指令,让宇宙了解你想要些什么,宇宙就会自动回应你的想法。</p>
                <p>这是一个很有意思的过程,就好比把宇宙当成一本货物的目录,你翻着它,然后决定“我要经历这个,我要那种东西,我要跟那种人一起生活”,你就是那个跟宇宙下订单的人。其实就是这样简单。</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
              <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 信念 </a> </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
              <div class="panel-body">
                <p>第二步是信念。你要相信你已经拥有它了。要有一种毫不动摇的信念,就是我的说法,要相信还没有实现的事,“你的愿望就是我的命令”,宇宙就会开始运作安排,从而满足你心中的愿望。</p>
                <p>大多数的时候,假如我们要求的事物没有出现在生活中,我们会感到沮丧和失望,我们甚至会开始怀疑,这种怀疑会让人感到心灰意冷。接受这个感觉,然后用坚定的信念代替它:“我知道……我知道……我知道……,它就要实现了。”</p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
              <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 接受 </a> </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
              <div class="panel-body">
                <p>第三步,就是这个过程最后一步,接受。开始感觉好极了,想想要是你想要的事物已经出现,那会是什么感觉。</p>
                <p>当你感觉好的时候,你就是把自己和你要的事物放在同一个频率上。尝试去做一切你能做的事,帮助自己具有拥有它们的感觉。无论你能做什么,只要去做,就有助于把这些东西吸引过来。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

页面的底部,需远程调用jQuery库和bootstrap插件,代码如下:

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2