<div id="fil-page" class="fil-page">
<div class="fil-container">
<div class="fil-demo-note">
<h2>C18.1 Top mega tabs (e.g. Fund facts/ fund story) </h2>
</div>
</div>

<!--#include virtual="/include/teamsite_component_begin.html" -->
<section class="au-section tabs-section">
<div class="tabs fil-tabs huge-tabs">
<ul class="fil-tabs-nav" id="myTab" role="tablist">
<li id="tab-item-one" class="nav-item tab-item current">
<a class="tab-link active " id="first-tab" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-expanded="true" onfocus="this.blur();">

<div class="tabs-icon icon-circle left">
<span class="icon-chart circle-icon"></span>
</div>
<div class="tabs-title-caption">
<h3 class="h3 post-head"><strong>Fund Facts</strong></h3>
<p>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.</p>
</div>

</a>
</li>
<li id="tab-item-two" class="nav-item tab-item">
<a class="tab-link" id="second-tab" data-toggle="tab" href="#second" role="tab" aria-controls="second" aria-expanded="false" onfocus="this.blur();">
<div class="tabs-icon icon-circle left">
<span class="icon-factsheet-full circle-icon"></span>
</div>
<div class="tabs-title-caption">
<h3 class="h3 post-head"><strong>Fund Story</strong></h3>
<p>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor.</p>
</div>
</a>
</li>
</ul>
</div>
<div class="tab-content fil-tab-content" id="myTabContent">
<div role="tabpanel" class="tab-pane fade in active" id="first" aria-labelledby="first-tab" aria-expanded="false">
<div class="fil-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis tellus augue. Nulla volutpat semper quam, sit amet cursus lacus. Nam aliquam eros a lectus convallis commodo.
</p>
<p>Etiam sodales placerat quam vel mollis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam tempor, nibh nec vehicula rutrum, ipsum est luctus mauris, eu pharetra dolor arcu sed sem. Quisque at tellus vel orci vehicula laoreet. Quisque finibus rhoncus lectus id porttitor.
</p>
</div>

</div>
<div class="tab-pane fade" id="second" role="tabpanel" aria-labelledby="second-tab" aria-expanded="true">
<div class="fil-container">
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. </p>
<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</p>
</div>
</div>
</div>
</section>
<!--#include virtual="/include/teamsite_component_end.html" -->

</div>

<script src="/static/js/lib/jquery.js"></script>
<script src="/static/js/lib/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn-dm-grid").click(function(){
$("#fil-dm-grid").toggle();
});
});

$(document).ready(function(){
$("#second-tab").click(function(){
//$(this).parent().parent().toggleClass('current');
$(this).parent().css('borderBottom','none');
});
});

</script>

.fil-demo-note{
margin: 0;
padding: 0;
padding-top: 20px;
}
.fil-demo-note h2{
margin-bottom: 0;
}
.fil-tabs{
position: relative;
padding-top: 30px;
}
.fil-tabs ul{
/* -webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-padding-start: 15px;
-webkit-padding-end: 15px; */
list-style: none;
padding-left: 15px;
padding-right: 15px;
max-width: 75rem;
margin: 0 auto;
}
.fil-tabs-nav{
max-width: 75rem;
margin: 0 auto;
}
.tabs::before, .tabs::after {
content: ' ';
display: table;
}
.tabs::after {
clear: both;
}
.fil-tabs::after {
content: "";
display: table;
clear: both;
}

.tabs .tab-link .h4{
margin-bottom: 0;
}
.tab-link {
display: inline-block;
}
.tab-link:focus,
.tab-link:hover {
text-decoration: none;
}
.fil-tabs .tab-link {
display: block;
color: #244a67;
padding: 10px 12px;
/* border: 1px solid #999; */
border-top: 5px solid transparent;
}
.fil-tabs .tab-link.active{

}
.fil-tabs a,
.fil-tabs a h4{
color: #244a67;
}
.fil-tabs a,
.fil-tabs a h4{
color: #244a67;
}
.fil-tabs a.tab-link.active,
.fil-tabs a.tab-link.active h4{
color: #333;
}
.fil-tabs .tab-link h4{
margin-bottom: 0;
}
.tabs .tab-link .ub-head{
margin-bottom: 0;
color:red;
}
.fil-tabs .tab-link:hover {
background-color: #f6f6f6;
}
.fil-tabs .tab-link.active,
.fil-tabs .tab-link.active:focus {
border-top: 5px solid #B22029;;
}
.fil-tabs .tab-item{
margin-bottom: 20px;
border: 1px solid #999;
}
.fil-tabs .tab-item:last-child{
margin-bottom: 0;
}
.fil-tabs .tab-item.open .tab-link,
.fil-tabs .tab-item.open .tab-link:focus,
.fil-tabs .tab-item.open .tab-link:hover,
.fil-tabs .tab-link.active,
.fil-tabs .tab-link.active:focus,
.fil-tabs .tab-link.active:hover {
color: #333;
background-color: #fff;
}
.fil-tabs .tab-item.current .tab-link,
.fil-tabs .tab-item.current .tab-link:focus,
.fil-tabs .tab-item.current .tab-link:hover{
color: #333;
background-color: #fff;
}
.fil-tab-content{
padding-top: 30px;
}
.tab-content>.tab-pane {
display: none;
}
.tab-content>.active {
display: block;
}
.fade {
opacity: 0;
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.fade.in {
opacity: 1;
}
.fil-tabs-cont{
position: absolute;
width: 100%;
margin-top: -1px;

-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}

@media only screen and (min-width: 64em){
.fil-tabs {
border-bottom: 1px solid #999;
}
.fil-tabs .tab-item {
float: left;
margin-bottom: -1px;
}
.fil-tabs .tab-item:last-child {
margin-bottom: -1px;
}
.fil-tabs .tab-item:last-child {
margin-bottom: -1px;
}
.fil-tabs .tab-link {
/* display: block; */
padding: 10px 30px;
/* border: 1px solid #999; */
border-bottom: none;
}
.fil-tabs .tab-item {
border: 1px solid #999;
}
.fil-tabs .nav-item.tab-item.open {
border-bottom: none;
}
.fil-tabs .nav-item.tab-item.current{
border-bottom: none;
}
.fil-tabs .tab-item{
border-right: none;
}
.fil-tabs .tab-item:first-child{
border-right: none;
}
.fil-tabs .tab-item:last-child{
border-right: 1px solid #999;
}
.fil-tabs .tab-item:first-child .tab-link{
border-right: none;
}
.fil-tabs .tab-item:last-child .tab-link{
border-left: none;
}
.fil-tab-content{
padding-top: 40px;
}
}

/*huge-tabs*/
.fil-tabs.huge-tabs{

}
.fil-tabs.huge-tabs .tab-item{
width: 100%;
}
.fil-tabs .tabs-icon{
width: 50px;
height: 50px;
border: 1px solid #244a67;
border-radius: 50%;
color: #244a67;
text-align: center;
vertical-align: middle;
}
.fil-tabs.huge-tabs .tab-link {
padding: 12px 12px 20px 12px;
}
.fil-tabs.huge-tabs .tabs-icon.left{
margin-right: 12px;
}
.fil-tabs.huge-tabs .tabs-icon.left ~ .tabs-title-caption{
margin-left: 12px;
padding-left: 50px;
}
.fil-tabs .tab-link.active .tabs-icon{
border: 1px solid #666;
}
.fil-tabs .tab-link.active .circle-icon{
color: #666;
}
.fil-tabs .tabs-icon .circle-icon{
display:block;
font-size: 30px;
margin-top: 8px;
}
.fil-tabs .tabs-title:before: {
content: ' ';
display: table;
}
.fil-tabs .tabs-title:after{
clear: both;
}
.fil-tabs .tabs-icon.left{
float: left;
}
.fil-tabs .tabs-title{
float: none;
display: table-cell;
border: 1px solid transparent;
vertical-align: top;
}
.fil-tabs a,
.fil-tabs a h3{
color: #244a67;
}
.fil-tabs a,
.fil-tabs a h3{
color: #244a67;
}
.fil-tabs a.tab-link.active,
.fil-tabs a.tab-link.active h3{
color: #333;
}
@media only screen and (min-width: 40em){

.fil-tabs .tabs-icon{
width: 80px;
height: 80px;
border: 2px solid #244a67;
border-radius: 50%;
color: #244a67;
text-align: center;
vertical-align: middle;
}
.fil-tabs .tab-link.active .tabs-icon{
border: 2px solid #666;
}
.fil-tabs .tab-link.active .circle-icon{
color: #666;
}
.fil-tabs .tabs-icon .circle-icon{
display:block;
font-size: 48px;
margin-top: 14px;
}
.fil-tabs.huge-tabs .tab-link {
padding: 18px 30px 20px 30px;
}
.fil-tabs.huge-tabs .tabs-icon.left{
margin-right: 20px;
}
.fil-tabs.huge-tabs .tabs-icon.left ~ .tabs-title-caption{
margin-left: 20px;
padding-left: 80px;
}
}
@media only screen and (min-width: 64em){
.fil-tabs.huge-tabs .tab-item{
width: 50%;
}
.fil-tabs .tabs-icon{
width: 92px;
height: 92px;
border-radius: 50%;
}
.fil-tabs .tabs-icon .circle-icon{
display:block;
font-size: 56px;
margin-top: 14px;
}
.fil-tabs.huge-tabs .tabs-icon.left ~ .tabs-title-caption{
margin-left: 20px;
padding-left: 92px;
}
.fil-tabs a.tab-link.active:after{
content:'';
display: table;
height: 1px;
background-color: red;
}
}

tttttabs的更多相关文章

随机推荐

  1. 解决chrome在docky上的图标模糊或不能锁定的问题

    1,终端执行以下命令:sudo nautilus2,打开usr/share/application,找到chrome的图标,右键找到属性,把“命令”里的内容换成/usr/bin/google-chro ...

  2. 【2016-10-12】【坚持学习】【Day3】【命令模式】

    今天学习了第二个模式,命令模式 例子: 开关==>发送者 电线==>命令传输 电灯==>接受者 一个开关可以通过不同电线控制不同电器, 结构: 发送者类, 抽象命令类 具体命令类:继 ...

  3. POJ2796Feel Good[单调栈]

    Feel Good Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 13376   Accepted: 3719 Case T ...

  4. Unity热门插件推荐

    前言 Unite2015的笔记 ,本文所提到的扩展主要针对 mobile上使用. 文中资源在Asset Store描述的截图日期:2016-04-28 Mesh Baker https://www.a ...

  5. 烈焰SWF解密

    SWF 解密 是用UE编辑器 改 SWF开头 的AA AA AA ,改成43 57 53 就解密了

  6. 嵌入式Linux驱动学习之路(六)u-boot启动内核

    内核启动是需要必要的启动参数.不能开机自动完全从0开始启动,需要uboot帮助内核实现重定位并提供参数. 首先,uboo会从Kernel分区中读取bootcmd环境变量,根据环境变量可自动启动. 分区 ...

  7. Java中run(), start(), join(), wait(), yield(), sleep()的使用

    run(), start(), join(), yield(), sleep() 这些是多线程中常用到的方法. run(): 每个Thread中需要实现的方法, 如果直接调用的话, 会是和单线程一样的 ...

  8. smarty foreach循环

    1,smarty foreach1,单纯的数组array(1000,2000,3000),使用foreach(from = $array item=foo){$foo}2,键值对数组<ul> ...

  9. Windows 8 开发系列汇总

    Windows 8 应用开发 Windows 8 应用开发 - 异步调用 Windows 8 应用开发 - 本地数据存储 Windows 8 应用开发 - 挂起与恢复 Windows 8 应用开发 - ...

  10. Palindrome Linked List

    Given a singly linked list, determine if it is a palindrome. Follow up:Could you do it in O(n) time ...