Difference between revisions of "Team:CSU CHINA/Team"

Line 8: Line 8:
 
</head>
 
</head>
 
<style>
 
<style>
−
/*--背景图片--*/
+
    /*--背景图片--*/
−
.background{
+
    .background {
−
    background:url(images/bg.jpg) no-repeat;
+
        background: url(images/bg.jpg) no-repeat;
−
    background-size: cover;
+
        background-size: cover;
−
-webkit-background-size: cover;
+
        -webkit-background-size: cover;
−
-moz-background-size: cover;
+
        -moz-background-size: cover;
−
-o-background-size: cover;
+
        -o-background-size: cover;
−
-moz-background-size: cover;
+
        -moz-background-size: cover;
−
min-height:300px;
+
        min-height: 300px;
−
}
+
    }
−
/*-- portfolio-inner-page --*/
+
    /*-- portfolio-inner-page --*/
−
.portfolio h4{
+
    .portfolio h4 {
−
color:#000;
+
        color: #000;
−
font-size:18px;
+
        font-size: 18px;
−
}
+
    }
−
label.portfolio-line{
+
    label.portfolio-line {
−
display:block;
+
        display: block;
−
background-color:#000;
+
        background-color: #000;
−
width:10%;
+
        width: 10%;
−
margin:15px auto;
+
        margin: 15px auto;
−
height:2px;
+
        height: 2px;
−
}
+
    }
−
.portfolio h6{
+
    .portfolio h6 {
−
width:50%;
+
        width: 50%;
−
margin:0 auto 20px auto;
+
        margin: 0 auto 20px auto;
−
font-size:14px;
+
        font-size: 14px;
−
line-height:30px;
+
        line-height: 30px;
−
}
+
    }
−
.portfolio-grid1,.portfolio-grid2,.portfolio-grid3, .portfolio-grid6, .portfolio-grid4, .portfolio-grid5 {
+
    .portfolio-grid1,
−
margin-bottom:20px;
+
    .portfolio-grid2,
−
}
+
    .portfolio-grid3,
−
/*--SAP--*/
+
    .portfolio-grid6,
−
.sap_tabs{
+
    .portfolio-grid4,
−
clear:both;
+
    .portfolio-grid5 {
−
padding: 0;
+
        margin-bottom: 20px;
−
}
+
    }
−
.tab_box{
+
    /*--SAP--*/
−
background:#fd926d;
+
    .sap_tabs {
−
padding: 2em;
+
        clear: both;
−
}
+
        padding: 0;
−
.top1{
+
    }
−
margin-top: 2%;
+
    .tab_box {
−
}
+
        background: #fd926d;
−
.resp-tabs-list {
+
        padding: 2em;
−
    list-style: none;
+
    }
−
    padding: 0 0 3em;
+
    .top1 {
−
    margin: 0 auto;
+
        margin-top: 2%;
−
    text-align: center;
+
    }
−
}
+
    .resp-tabs-list {
−
.resp-tab-item {
+
        list-style: none;
−
    color: #333;
+
        padding: 0 0 3em;
−
    font-size: 1.1em;
+
        margin: 0 auto;
−
    font-weight: 500;
+
        text-align: center;
−
    cursor: pointer;
+
    }
−
    display: inline-block;
+
    .resp-tab-item {
−
    margin: 0;
+
        color: #333;
−
    text-align: center;
+
        font-size: 1.1em;
−
    list-style: none;
+
        font-weight: 500;
−
    outline: none;
+
        cursor: pointer;
−
    -webkit-transition: all 0.3s;
+
        display: inline-block;
−
    -moz-transition: all 0.3s;
+
        margin: 0;
−
    -ms-transition: all 0.3s;
+
        text-align: center;
−
    -o-transition: all 0.3s;
+
        list-style: none;
−
    transition: all 0.3s;
+
        outline: none;
−
    text-transform: uppercase;
+
        -webkit-transition: all 0.3s;
−
    margin: 0 0.3em 0;
+
        -moz-transition: all 0.3s;
−
border-bottom: 2px solid #fff;
+
        -ms-transition: all 0.3s;
−
color:#000;
+
        -o-transition: all 0.3s;
−
padding:10px 15px;
+
        transition: all 0.3s;
−
border:2px solid #23b684;
+
        text-transform: uppercase;
−
}
+
        margin: 0 0.3em 0;
 +
        border-bottom: 2px solid #fff;
 +
        color: #000;
 +
        padding: 10px 15px;
 +
        border: 2px solid #23b684;
 +
    }
 +
    .resp-tab-active {
 +
        background-color: #23b684;
 +
        color: #fff;
 +
    }
 +
    .resp-tabs-container {
 +
        padding: 0px;
 +
        clear: left;
 +
    }
 +
    h2.resp-accordion {
 +
        cursor: pointer;
 +
        padding: 5px;
 +
        display: none;
 +
    }
 +
    .resp-tab-content {
 +
        display: none;
 +
    }
 +
    .resp-content-active,
 +
    .resp-accordion-active {
 +
        display: block;
 +
    }
 +
    .tab_img {
 +
        padding: 2em 0 0;
 +
        display: inline-block;
 +
    }
 +
    .portfolio-grids {
 +
        float: left;
 +
    }
 +
    .portfolio-grids a {
 +
        display: block;
 +
        overflow: hidden;
 +
        position: relative;
 +
    }
 +
    .portfolio-grids img.img-responsive {
 +
        width: 100%;
 +
    }
 +
    .b-wrapper {
 +
        background: rgba(0, 0, 0, 0.7);
 +
        position: absolute;
 +
        width: 100%;
 +
        height: 100%;
 +
        bottom: 0%;
 +
        left: 0;
 +
        -webkit-transition: .5s all;
 +
        -moz-transition: .5s all;
 +
        transition: .5s all;
 +
        -webkit-transform: scale(0);
 +
        -moz-transform: scale(0);
 +
        transform: scale(0);
 +
        -o-transform: scale(0);
 +
        -ms-transform: scale(0);
 +
    }
 +
    .portfolio-grids a:hover .b-wrapper {
 +
        -webkit-transform: scale(1);
 +
        -moz-transform: scale(1);
 +
        transform: scale(1);
 +
        -o-transform: scale(1);
 +
        -ms-transform: scale(1);
 +
    }
 +
    .b-wrapper h5,
 +
    .b-wrapper h2 {
 +
        font-size: 2.5em;
 +
        color: #fff;
 +
        text-align: center;
 +
        padding: 30% 0;
 +
        font-weight: 300;
 +
    }
 +
    img.zoom-img {
 +
        -webkit-transform: scale(1, 1);
 +
        transform: scale(1, 1);
 +
        -moz-transform: scale(1, 1);
 +
        -ms-transform: scale(1, 1);
 +
        -o-transform: scale(1, 1);
 +
        transition-timing-function: ease-out;
 +
        -webkit-transition-timing-function: ease-out;
 +
        -moz-transition-timing-function: ease-out;
 +
        -ms-transition-timing-function: ease-out;
 +
        -o-transition-timing-function: ease-out;
 +
        -webkit-transition-duration: 2s !important;
 +
        -moz-transition-duration: 2s !important;
 +
        transition-duration: 2s !important;
 +
    }
 +
    img.zoom-img:hover,
 +
    .portfolio-grids:hover img.zoom-img {
 +
        -webkit-transform: scale(1.2);
 +
        transform: scale(1.2);
 +
        -moz-transform: scale(1.2);
 +
        -ms-transform: scale(1.2);
 +
        -o-transform: scale(1.2);
 +
        overflow: hidden;
 +
    }
 +
    /*-- //portfolio-inner-page --*/
 +
    @media(max-width: 991px) {
 +
        button.navbar-toggler {
 +
            background: #fff;
 +
            border-radius: 0px;
 +
        }
 +
        .resp-tab-item {
 +
            padding: 10px 38px;
 +
            margin-bottom: 0.5em;
 +
        }
 +
    }
 +
</style>
  
−
.resp-tab-active {
 
−
  background-color:#23b684;
 
−
color:#fff;
 
−
 
−
}
 
−
.resp-tabs-container {
 
−
padding: 0px;
 
−
clear: left;
 
−
}
 
−
h2.resp-accordion {
 
−
cursor: pointer;
 
−
padding: 5px;
 
−
display: none;
 
−
}
 
−
.resp-tab-content {
 
−
display: none;
 
−
}
 
−
.resp-content-active, .resp-accordion-active {
 
−
  display: block;
 
−
}
 
−
 
−
.tab_img{
 
−
padding:2em 0 0;
 
−
display: inline-block;
 
−
}
 
−
.portfolio-grids {
 
−
float:left;
 
−
}
 
−
.portfolio-grids a {
 
−
    display: block;
 
−
    overflow: hidden;
 
−
position:relative;
 
−
}
 
−
.portfolio-grids img.img-responsive {
 
−
width: 100%;
 
−
}
 
−
.b-wrapper {
 
−
    background: rgba(0, 0, 0, 0.7);
 
−
    position: absolute;
 
−
    width: 100%;
 
−
    height: 100%;
 
−
    bottom: 0%;
 
−
    left: 0;
 
−
-webkit-transition: .5s all;
 
−
-moz-transition: .5s all;
 
−
    transition: .5s all;
 
−
-webkit-transform: scale(0);
 
−
-moz-transform: scale(0);
 
−
    transform: scale(0);
 
−
-o-transform: scale(0);
 
−
-ms-transform: scale(0);
 
−
}
 
−
.portfolio-grids a:hover .b-wrapper{
 
−
-webkit-transform: scale(1);
 
−
-moz-transform: scale(1);
 
−
    transform: scale(1);
 
−
-o-transform: scale(1);
 
−
-ms-transform: scale(1);
 
−
}
 
−
.b-wrapper h5, .b-wrapper h2 {
 
−
    font-size: 2.5em;
 
−
    color: #fff;
 
−
    text-align: center;
 
−
    padding: 30% 0;
 
−
    font-weight: 300;
 
−
}
 
−
img.zoom-img{
 
−
-webkit-transform: scale(1, 1);
 
−
    transform: scale(1, 1);
 
−
-moz-transform: scale(1, 1);
 
−
-ms-transform: scale(1, 1);
 
−
-o-transform: scale(1, 1);
 
−
transition-timing-function: ease-out;
 
−
-webkit-transition-timing-function: ease-out;
 
−
-moz-transition-timing-function: ease-out;
 
−
-ms-transition-timing-function: ease-out;
 
−
-o-transition-timing-function: ease-out;
 
−
-webkit-transition-duration: 2s !important;
 
−
-moz-transition-duration: 2s !important;
 
−
transition-duration: 2s !important;
 
−
}
 
−
img.zoom-img:hover,.portfolio-grids:hover img.zoom-img{
 
−
-webkit-transform: scale(1.2);
 
−
transform: scale(1.2);
 
−
-moz-transform: scale(1.2);
 
−
-ms-transform: scale(1.2);
 
−
-o-transform: scale(1.2);
 
−
overflow: hidden;
 
−
}
 
−
/*-- //portfolio-inner-page --*/
 
−
@media(max-width: 991px) {
 
−
button.navbar-toggler {
 
−
        background: #fff;
 
−
border-radius: 0px;
 
−
}
 
−
.resp-tab-item {
 
−
padding: 10px 38px;
 
−
margin-bottom: 0.5em;}
 
−
}
 
−
</style>
 
 
<body>
 
<body>
−
<div class="background"></div>
+
    <div class="background"></div>
−
<div id="portfolio" class="portfolio">
+
    <div id="portfolio" class="portfolio">
−
<div class="heading">
+
        <div class="heading">
−
<h3>TEAM</h3>
+
            <h3>TEAM</h3>
−
</div>
+
        </div>
−
<div class="container">
+
        <div class="container">
−
<div class="sap_tabs">
+
            <div class="sap_tabs">
−
<div id="horizontalTab">
+
                <div id="horizontalTab">
−
<ul class="resp-tabs-list">
+
                    <ul class="resp-tabs-list">
−
<li class="resp-tab-item"><span>Student Members</span></li>
+
                        <li class="resp-tab-item"><span>Student Members</span>
−
<li class="resp-tab-item"><span>Team Leader</span></li>
+
                        </li>
−
<li class="resp-tab-item"><span>Instructors</span></li>
+
                        <li class="resp-tab-item"><span>Team Leader</span>
−
<li class="resp-tab-item"><span>  Advisors  </span></li>
+
                        </li>
−
</ul>
+
                        <li class="resp-tab-item"><span>Instructors</span>
−
<div class="clearfix"> </div>
+
                        </li>
−
<div class="resp-tabs-container">
+
                        <li class="resp-tab-item"><span>  Advisors  </span>
−
<div class="tab-1 resp-tab-content row">
+
                        </li>
−
<div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid1">
+
                    </ul>
−
<a href="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" data-lightbox="example-set" data-title="My name is Qingxin Shi, a 20-year-old boy from Central South University. My major is life science and now I’m a junior student. This year is my first time to enjoy myself in iGEM and I am in charge of the online submission of our team CSU_CHINA and doing experiments. I’m so glad to master many new skills to make me be better and make many outstanding new friends. iGEM makes my life more colorful and I want to meet more interesting friends. Let’s do our best here! ">
+
                    <div class="clearfix"></div>
−
<img src="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" class="img-responsive zoom-img" alt=""/>
+
                    <div class="resp-tabs-container">
−
<div class="b-wrapper">
+
                        <div class="tab-1 resp-tab-content row">
−
<h2>Shi Qingxin</h2>
+
                            <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid1">
−
</div>
+
                                <a href="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" data-lightbox="example-set" data-title="My name is Qingxin Shi, a 20-year-old boy from Central South University. My major is life science and now I’m a junior student. This year is my first time to enjoy myself in iGEM and I am in charge of the online submission of our team CSU_CHINA and doing experiments. I’m so glad to master many new skills to make me be better and make many outstanding new friends. iGEM makes my life more colorful and I want to meet more interesting friends. Let’s do our best here! ">
−
</a>
+
                                    <img src="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" class="img-responsive zoom-img" alt="" />
−
</div>
+
                                    <div class="b-wrapper">
−
<div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid2">
+
                                        <h2>Shi Qingxin</h2>
−
<a href="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" data-lightbox="example-set" data-title="My name is Shangcheng Yu, a 21-year-old boy, currently studying at Central South University majored in biological science. I’m mainly in charge of the experiment part of our whole IGEM project. In my spare time, I enjoy listening to music and watching cartoons. Discussing research progress and exchanging ideas about science especially in the field of immunology is also my favor. I’m outgoing and willing to make friends. For any related question, you can feel free to contact my e-mail below.  
+
                                    </div>
 +
                                </a>
 +
                            </div>
 +
                            <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid2">
 +
                                <a href="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" data-lightbox="example-set" data-title="My name is Shangcheng Yu, a 21-year-old boy, currently studying at Central South University majored in biological science. I’m mainly in charge of the experiment part of our whole IGEM project. In my spare time, I enjoy listening to music and watching cartoons. Discussing research progress and exchanging ideas about science especially in the field of immunology is also my favor. I’m outgoing and willing to make friends. For any related question, you can feel free to contact my e-mail below.  
 
cell_ysc@foxmail.com  ">
 
cell_ysc@foxmail.com  ">
−
<img src="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" class="img-responsive zoom-img" alt=""/>
+
                                    <img src="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" class="img-responsive zoom-img" alt="" />
−
<div class="b-wrapper">
+
                                    <div class="b-wrapper">
−
<h5>Yu Shangcheng</h5>
+
                                        <h5>Yu Shangcheng</h5>
−
</div>
+
                                    </div>
−
</a>
+
                                </a>
−
</div>
+
                            </div>
−
<div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid3">
+
                            <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid3">
−
<a href="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" data-lightbox="example-set" data-title="Dong Yufan, the junior undergraduate majored in biological sciences, acts as a member of the CSU_CHINA in 2018 iGEM. St.Dong is dedicated in studying the molecular mechanism of special gene related to certain genetic diseases during these two years, as well as participating in several kinds of social activities like the student union, communication in the institution of neurobiology, summer school in HKU, and so forth.  
+
                                <a href="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" data-lightbox="example-set" data-title="Dong Yufan, the junior undergraduate majored in biological sciences, acts as a member of the CSU_CHINA in 2018 iGEM. St.Dong is dedicated in studying the molecular mechanism of special gene related to certain genetic diseases during these two years, as well as participating in several kinds of social activities like the student union, communication in the institution of neurobiology, summer school in HKU, and so forth.  
 
Besides, st.Dong has a great passion on music esp piano, and all kinds of sports. ">
 
Besides, st.Dong has a great passion on music esp piano, and all kinds of sports. ">
−
<img src="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" class="img-responsive zoom-img" alt=""/>
+
                                    <img src="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" class="img-responsive zoom-img" alt="" />
−
<div class="b-wrapper">
+
                                    <div class="b-wrapper">
−
<h5>Dong Yufan</h5>
+
                                        <h5>Dong Yufan</h5>
−
</div>
+
                                    </div>
−
</a>
+
                                </a>
−
</div>
+
                            </div>
−
<div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid4">
+
                            <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid4">
−
<a href="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" data-lightbox="example-set" data-title="My name is Yao Keyu. I am 20 years old now ，but in my heart,forever 18. I am currently a junior student of Central South University. My major is Detection, guidance and control technology.I'm honored to participate in this competition. In the CSU-CHINA team ,I am an art designer.I spend most of my time on designing the poster 、website design and so on. I have lots of interest, such as singing, dancing, drawing and so on.On vacation,I usually like to have the Volunteer Travel. ">
+
                                <a href="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" data-lightbox="example-set" data-title="My name is Yao Keyu. I am 20 years old now ，but in my heart,forever 18. I am currently a junior student of Central South University. My major is Detection, guidance and control technology.I'm honored to participate in this competition. In the CSU-CHINA team ,I am an art designer.I spend most of my time on designing the poster 、website design and so on. I have lots of interest, such as singing, dancing, drawing and so on.On vacation,I usually like to have the Volunteer Travel. ">
−
<img src="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" class="img-responsive zoom-img" alt=""/>
+
                                    <img src="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" class="img-responsive zoom-img" alt="" />
−
<div class="b-wrapper">
+
                                    <div class="b-wrapper">
−
<h5>Yao Keyu</h5>
+
                                        <h5>Yao Keyu</h5>
−
</div>
+
                                    </div>
−
</a>
+
                                </a>
−
</div>
+
                            </div>
−
<div class="clearfix"> </div>
+
                            <div class="clearfix"></div>
−
</div>
+
                        </div>
−
<div class="tab-1 resp-tab-content">
+
                        <div class="tab-1 resp-tab-content">
−
+
−
<div class="clearfix"> </div>
+
−
</div>
+
−
<div class="tab-1 resp-tab-content">
+
−
<div class="clearfix"> </div>
+
−
</div>
+
−
<div class="tab-1 resp-tab-content">
+
−
+
−
<div class="clearfix"> </div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<!--script for portfolio-->
+
−
<script src="https://2018.igem.org/Template:Valencia_UPV/lightboxminJS?action=raw&amp;ctype=text/javascript"> </script>
+
−
<script>
+
−
// Easy Responsive Tabs Plugin
+
−
// Author: Samson.Onna <Email : samson3d@gmail.com>
+
−
(function ($) {
+
−
    $.fn.extend({
+
−
        easyResponsiveTabs: function (options) {
+
−
            //Set the default values, use comma to separate the settings, example:
+
−
            var defaults = {
+
−
                type: 'default', //default, vertical, accordion;
+
−
                width: 'auto',
+
−
                fit: true
+
−
            }
+
−
            //Variables
+
−
            var options = $.extend(defaults, options);           
+
−
            var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion';
+
  
−
            //Main function
+
                            <div class="clearfix"></div>
−
            this.each(function () {
+
                        </div>
−
                var $respTabs = $(this);
+
                        <div class="tab-1 resp-tab-content">
−
                $respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item');
+
                            <div class="clearfix"></div>
−
                $respTabs.css({
+
                        </div>
−
                    'display': 'block',
+
                        <div class="tab-1 resp-tab-content">
−
                    'width': jwidth
+
−
                });
+
  
−
                $respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content');
+
                            <div class="clearfix"></div>
−
                jtab_options();
+
                        </div>
−
                //Properties Function
+
                     </div>
−
                function jtab_options() {
+
                 </div>
−
                     if (jtype == vtabs) {
+
            </div>
−
                        $respTabs.addClass('resp-vtabs');
+
        </div>
−
                    }
+
    </div>
−
                    if (jfit == true) {
+
    <!--script for portfolio-->
−
                        $respTabs.css({ width: '100%', margin: '0px' });
+
<script src="https://2018.igem.org/Template:Valencia_UPV/lightboxminJS?action=raw&amp;ctype=text/javascript"></script>
−
                    }
+
<script src="https://2019.igem.org/Template:CSU_CHINA/JS/easyResponsiveTabsjs?action=raw&amp;ctype=text/javascript"></script>
−
                    if (jtype == accord) {
+
    <script type="text/javascript">
−
                        $respTabs.addClass('resp-easy-accordion');
+
        $(document).ready(function () {
−
                        $respTabs.find('.resp-tabs-list').css('display', 'none');
+
            $('#horizontalTab').easyResponsiveTabs({
−
                    }
+
                type: 'default', //Types: default, vertical, accordion          
−
                }
+
                width: 'auto', //auto or any width like 600px
−
 
+
                 fit: true // 100% fit in a container
−
                //Assigning the h2 markup
+
−
                 var $tabItemh2;
+
−
                $respTabs.find('.resp-tab-content').before("<h2 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h2>");
+
−
 
+
−
                var itemCount = 0;
+
−
                $respTabs.find('.resp-accordion').each(function () {
+
−
                    $tabItemh2 = $(this);
+
−
                    var innertext = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')').text();
+
−
                    $respTabs.find('.resp-accordion:eq(' + itemCount + ')').append(innertext);
+
−
                    $tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount));
+
−
                    itemCount++;
+
−
                });
+
−
 
+
−
                //Assigning the 'aria-controls' to Tab items
+
−
                var count = 0,
+
−
                    $tabContent;
+
−
                $respTabs.find('.resp-tab-item').each(function () {
+
−
                    $tabItem = $(this);
+
−
                    $tabItem.attr('aria-controls', 'tab_item-' + (count));
+
−
                    $tabItem.attr('role', 'tab');
+
−
 
+
−
                    //First active tab                 
+
−
                    $respTabs.find('.resp-tab-item').first().addClass('resp-tab-active');
+
−
                    $respTabs.find('.resp-accordion').first().addClass('resp-tab-active');
+
−
                    $respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block');
+
−
 
+
−
                    //Assigning the 'aria-labelledby' attr to tab-content
+
−
                    var tabcount = 0;
+
−
                    $respTabs.find('.resp-tab-content').each(function () {
+
−
                        $tabContent = $(this);
+
−
                        $tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount));
+
−
                        tabcount++;
+
−
                    });
+
−
                    count++;
+
−
                });
+
−
 
+
−
                //Tab Click action function
+
−
                $respTabs.find("[role=tab]").each(function () {
+
−
                    var $currentTab = $(this);
+
−
                    $currentTab.click(function () {
+
−
 
+
−
                        var $tabAria = $currentTab.attr('aria-controls');
+
−
 
+
−
                        if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) {
+
−
                            $respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); });
+
−
                            $currentTab.removeClass('resp-tab-active');
+
−
                            return false;
+
−
                        }
+
−
                        if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) {
+
−
                            $respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
+
−
                            $respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed');
+
−
                            $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
+
−
 
+
−
                            $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active');
+
−
                        } else {
+
−
                            $respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
+
−
                            $respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed');
+
−
                            $respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
+
−
                            $respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block');
+
−
                        }
+
−
                    });
+
−
                    //Window resize function                 
+
−
                    $(window).resize(function () {
+
−
                        $respTabs.find('.resp-accordion-closed').removeAttr('style');
+
−
                    });
+
−
                 });
+
 
             });
 
             });
−
         }
+
         });
−
    });
+
    </script>
−
})(jQuery);
+
    <!--//script for portfolio-->
 +
</body>
  
−
 
−
</script>
 
−
<script type="text/javascript">
 
−
$(document).ready(function () {
 
−
$('#horizontalTab').easyResponsiveTabs({
 
−
type: 'default', //Types: default, vertical, accordion         
 
−
width: 'auto', //auto or any width like 600px
 
−
fit: true  // 100% fit in a container
 
−
});
 
−
});
 
−
</script>
 
−
<!--//script for portfolio-->
 
−
</body>
 
 
</html>
 
</html>

Revision as of 08:42, 19 October 2019

loading……

CSU_CHINA_TEAM

TEAM

  • Student Members
  • Team Leader
  • Instructors
  • Advisors

Shi Qingxin
Yu Shangcheng
Dong Yufan
Yao Keyu