array(19) {
  ["id"]=>
  int(6)
  ["uid"]=>
  int(1)
  ["title"]=>
  string(64) "基于bootstrap简洁有创意的点击切换Tabs选项卡特效"
  ["color"]=>
  string(0) ""
  ["litpic"]=>
  string(22) "/uploads/2021/jq06.png"
  ["listid"]=>
  int(6)
  ["filesize"]=>
  string(4) "0.00"
  ["regtime"]=>
  string(19) "2021-05-13 13:55:07"
  ["updatetime"]=>
  string(19) "2021-05-13 14:02:54"
  ["click"]=>
  int(844)
  ["zan"]=>
  int(0)
  ["aid"]=>
  int(6)
  ["demo"]=>
  string(20) "/demo/page/jq06.html"
  ["down"]=>
  string(23) "19mB7o7fQDMCjxVIF7f5fNg"
  ["tqm"]=>
  string(4) "1gck"
  ["source"]=>
  string(0) ""
  ["size"]=>
  int(0)
  ["content"]=>
  string(5215) "<p>基于jquery和bootstrap，通过简单的十几行CSS代码，将原生的bootstrap选项卡进行美化，效果非常炫酷。</p><h2>浏览器兼容</h2><p>Chrome、 Opera、 Safari、Opera、IE9+</p><h2>使用方法</h2><pre class="brush:html;toolbar:false">1.&nbsp;引入文件：

&lt;linkhref=&quot;css/bootstrap.min.css&quot;rel=&quot;stylesheet&quot;&gt;
&lt;scriptsrc=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;scriptsrc=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

2.&nbsp;html：

&lt;div&nbsp;class=&quot;tab&quot;role=&quot;tabpanel&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;Nav&nbsp;tabs&nbsp;--&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;ul&nbsp;class=&quot;nav&nbsp;nav-tabs&quot;role=&quot;tablist&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;role=&quot;presentation&quot;&nbsp;class=&quot;active&quot;&gt;&lt;ahref=&quot;#Section1&quot;&nbsp;aria-controls=&quot;home&quot;&nbsp;role=&quot;tab&quot;&nbsp;data-toggle=&quot;tab&quot;&gt;Section&nbsp;1&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;role=&quot;presentation&quot;&gt;&lt;a&nbsp;href=&quot;#Section2&quot;&nbsp;aria-controls=&quot;profile&quot;&nbsp;role=&quot;tab&quot;&nbsp;data-toggle=&quot;tab&quot;&gt;Section&nbsp;2&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li&nbsp;role=&quot;presentation&quot;&gt;&lt;a&nbsp;href=&quot;#Section3&quot;&nbsp;aria-controls=&quot;messages&quot;&nbsp;role=&quot;tab&quot;&nbsp;data-toggle=&quot;tab&quot;&gt;Section&nbsp;3&lt;/a&gt;&lt;/li&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/ul&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;Tab&nbsp;panes&nbsp;--&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;tab-content&nbsp;tabs&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;role=&quot;tabpanel&quot;&nbsp;class=&quot;tab-pane&nbsp;fade&nbsp;in&nbsp;active&quot;id=&quot;Section1&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;Section&nbsp;1&lt;/h3&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;.......&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;role=&quot;tabpanel&quot;&nbsp;class=&quot;tab-pane&nbsp;fade&quot;id=&quot;Section2&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;Section&nbsp;2&lt;/h3&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;......&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;role=&quot;tabpanel&quot;&nbsp;class=&quot;tab-pane&nbsp;fade&quot;id=&quot;Section3&quot;&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h3&gt;Section&nbsp;3&lt;/h3&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;.......&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;
&lt;/div&gt;

3.&nbsp;CSS：

a:hover,a:focus{
&nbsp;&nbsp;text-decoration:none;
&nbsp;&nbsp;outline:none;
}
.tab&nbsp;.nav-tabs{
&nbsp;&nbsp;border:none;
&nbsp;&nbsp;border-bottom:2pxsolid#079fc9;
&nbsp;&nbsp;margin:0;
}
.tab&nbsp;.nav-tabs&nbsp;li&nbsp;a{
&nbsp;&nbsp;padding:10px20px;
&nbsp;&nbsp;margin:010px-1px0;
&nbsp;&nbsp;font-size:17px;
&nbsp;&nbsp;font-weight:600;
&nbsp;&nbsp;color:#293241;
&nbsp;&nbsp;text-transform:uppercase;
&nbsp;&nbsp;border:2pxsolid#e6e5e1;
&nbsp;&nbsp;border-bottom:none;
&nbsp;&nbsp;border-radius:5px5px00;
&nbsp;&nbsp;z-index:1;
&nbsp;&nbsp;position:relative;
&nbsp;&nbsp;transition:all0.3s&nbsp;ease0s;
}
.tab&nbsp;.nav-tabs&nbsp;li&nbsp;a:hover,
.tab&nbsp;.nav-tabs&nbsp;li.active&nbsp;a{
&nbsp;&nbsp;background:#fff;
&nbsp;&nbsp;color:#079fc9;
&nbsp;&nbsp;border:2pxsolid#079fc9;
&nbsp;&nbsp;border-bottom-color:transparent;
}
.tab&nbsp;.nav-tabs&nbsp;li&nbsp;a:before{
&nbsp;&nbsp;content:&quot;&quot;;
&nbsp;&nbsp;display:block;
&nbsp;&nbsp;height:2px;
&nbsp;&nbsp;background:#fff;
&nbsp;&nbsp;position:absolute;
&nbsp;&nbsp;bottom:-2px;
&nbsp;&nbsp;left:0;
&nbsp;&nbsp;right:0;
&nbsp;&nbsp;transform:&nbsp;scaleX(0);
&nbsp;&nbsp;transition:all0.3s&nbsp;ease-in-out0s;
}
.tab&nbsp;.nav-tabs&nbsp;li.active&nbsp;a:before,
.tab&nbsp;.nav-tabs&nbsp;li&nbsp;a:hover:before{transform:&nbsp;scaleX(1);&nbsp;}
.tab&nbsp;.tab-content{
&nbsp;&nbsp;padding:10px;
&nbsp;&nbsp;font-size:17px;
&nbsp;&nbsp;color:#6f6f6f;
&nbsp;&nbsp;line-height:30px;
&nbsp;&nbsp;letter-spacing:1px;
&nbsp;&nbsp;position:relative;
}
@media&nbsp;onlyscreenand&nbsp;(max-width:479px){
&nbsp;&nbsp;.tab&nbsp;.nav-tabs{border:none;&nbsp;}
&nbsp;&nbsp;.tab&nbsp;.nav-tabs&nbsp;li{
&nbsp;&nbsp;&nbsp;&nbsp;width:100%;
&nbsp;&nbsp;&nbsp;&nbsp;text-align:center;
&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom:15px;
&nbsp;&nbsp;}
&nbsp;&nbsp;.tab&nbsp;.nav-tabs&nbsp;li&nbsp;a{
&nbsp;&nbsp;&nbsp;&nbsp;margin:0;
&nbsp;&nbsp;&nbsp;&nbsp;border-bottom:2pxsolidtransparent;
&nbsp;&nbsp;}
&nbsp;&nbsp;.tab&nbsp;.nav-tabs&nbsp;li&nbsp;a:before{
&nbsp;&nbsp;&nbsp;&nbsp;content:&quot;&quot;;
&nbsp;&nbsp;&nbsp;&nbsp;width:100%;
&nbsp;&nbsp;&nbsp;&nbsp;height:2px;
&nbsp;&nbsp;&nbsp;&nbsp;background:#079fc9;
&nbsp;&nbsp;&nbsp;&nbsp;position:absolute;
&nbsp;&nbsp;&nbsp;&nbsp;bottom:-2px;
&nbsp;&nbsp;&nbsp;&nbsp;left:0;
&nbsp;&nbsp;}
}</pre><p><br/></p>"
  ["tags"]=>
  NULL
}