<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. ios移动端切图及前端规范

    移动端IOS知识普及:IOS标准分辨率:1242px * 2208px 切片要求: 1.    设计稿是按标准分辨率1242X2208设计,图片资源尺寸则是3倍图尺寸,将整个设计图压缩成750X133 ...

  2. java设计模式之适配器模式

    说到适配器,我们可能会想到电脑的适配器,没错,其实作用是一样的,电脑的适配器在中国可以使用,在美国也可以使用,它的主要作用是在新接口和老接口之间进行适配..这就是一个适配的过程,适配器模式的类图如下: ...

  3. 洛谷10月月赛Round.1| P3399 丝绸之路 [DP]

    题目背景 张骞于公元前138年曾历尽艰险出使过西域.加强了汉朝与西域各国的友好往来.从那以后,一队队骆驼商队在这漫长的商贸大道上行进,他们越过崇山峻岭,将中国的先进技术带向中亚.西亚和欧洲,将那里的香 ...

  4. AC日记——二叉树最大宽度和高度 1501 codevs

    1501 二叉树最大宽度和高度  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver     题目描述 Description   给出一个二叉树,输出它的最大宽 ...

  5. java 关于多线程高并发方面

    转有关的文章链接: Java 高并发一:前言: http://www.jb51.net/article/92358.htm Java 高并发二:多线程基础详细介绍 http://www.jb51.ne ...

  6. uva167 The Sultan's Successors

    The Sultan's Successors Description The Sultan of Nubia has no children, so she has decided that the ...

  7. Oracle 游标使用全解

    -- 声明游标:CURSOR cursor_name IS select_statement --For 循环游标 --(1)定义游标 --(2)定义游标变量 --(3)使用for循环来使用这个游标 ...

  8. Centos 检查磁盘读写性能

    启动Tomcat发现deploy war的速度明显变慢, 怀疑磁盘出问题 测试写入 [tomcat@localhost ~]$ dd if=/dev/zero of=kwxgd bs=64k coun ...

  9. Delphi项目构成之单元文件PAS

    单元文件是Pascal源文件,扩展名为.pas. 有三种类型的单元文件: 窗体/数据模块和框架的单元文件(form/data module and frame units),一般由Delphi自动生成 ...

  10. Post model至Web Api创建或是保存数据

    前一篇<Post model至Web Api>http://www.cnblogs.com/insus/p/4343538.html中,使用Post来从Web Api获取数据.由于Post ...