| Server IP : 210.245.233.93 / Your IP : 216.73.216.226 Web Server : Apache/2.2.15 (CentOS) System : Linux webserver2.onesolution.com.hk 2.6.32-754.35.1.el6.x86_64 #1 SMP Sat Nov 7 12:42:14 UTC 2020 x86_64 User : apache ( 48) PHP Version : 5.3.3 Disable Function : exec, shell_exec, system, passthru, popen, proc_open, pcntl_exec MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/hkosl.com/waiyin/tc/view/ |
Upload File : |
<!DOCTYPE html>
<html lang="en-HK" prefix="og: http://ogp.me/ns#">
<head>
<title>語言文化交流團獎學金 - 慧妍雅集, WAI YIN ASSOCIATION</title>
<!-- css -->
<?php include 'inc/headlinks.php'; ?>
<!-- js -->
<?php include 'inc/link-js.php'; ?>
</head>
<body>
<!-- header -->
<?php include 'inc/navbar.php'; ?>
<!-- end of header-->
<!-- breadcrumb -->
<div class="breadcrumb" style="background-image:url(../../assets/images/breadcrumbbg.jpg);">
<div class="breadcrumbWrapper text-center">
<p class="breadcrumbTitle mb-2 pt-4 h3 text-uppercase whiteFont">語言文化交流團獎學金
</p>
<div class="breadcrumbLink whiteFont">
<a href="index.php" class="whiteFont"> 首頁</a> / <span class="whiteFont">語言文化交流團獎學金
</span>
</div>
</div>
</div>
<section class="mainWrap">
<div class="container">
<div class="d-flex align-items-center mb-4 justify-content-center">
<label for="Year" class="nowrap mb-0 mr-2">語言文化交流團獎學金:</label>
<div class="selectionSelecter">
<select class="form-control selecter" id="Year">
<option>2016</option>
<option>2015</option>
<option>2014</option>
<option>2013</option>
</select>
</div>
</div>
<div class="langFundContentList">
<div class="langFundContent text-center" data-year="2016">
<img src="../../assets/images/langfund2016.jpg" class="img-fluid">
</div>
<div class="langFundContent text-center" data-year="2015">
<img src="../../assets/images/fund/2015.jpg" class="img-fluid">
</div>
<div class="langFundContent text-center" data-year="2014">
<ul class="tabNav mb-4">
<li class="btn boxshardow btn-outline-primary"><a href="#tabs2014-1" >Japan</a></li>
<li class="btn boxshardow btn-outline-primary"><a href="#tabs2014-2" >Korea</a></li>
</ul>
<div id="tabs2014-1" class="tab-content">
<img src="../../assets/images/fund/2014japan.jpg" class="img-fluid">
</div>
<div id="tabs2014-2" class="tab-content">
<img src="../../assets/images/fund/2014korea.jpg" class="img-fluid">
</div>
</div>
<div class="langFundContent text-center" data-year="2013">
<ul class="tabNav mb-4">
<li class="btn boxshardow btn-outline-primary"><a href="#tabs2013-1" >Japan</a></li>
<li class="btn boxshardow btn-outline-primary"><a href="#tabs2013-2" >Korea</a></li>
<li class="btn boxshardow btn-outline-primary"><a href="#tabs2013-3" >Singapore</a></li>
</ul>
<div id="tabs2013-1" class="tab-content">
<img src="../../assets/images/fund/2013japan.jpg" class="img-fluid">
</div>
<div id="tabs2013-2" class="tab-content">
<img src="../../assets/images/fund/2013korea.jpg" class="img-fluid">
</div>
<div id="tabs2013-3" class="tab-content">
<img src="../../assets/images/fund/2013singapore.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
</section>
<!-- end #section -->
<!-- footer -->
<?php include 'inc/footer.php'; ?>
<script>
$(function() {
// Show the first tab and hide the rest
$('.tab-content').hide();
$('.tab-content:first').show();
// Click function
$('.tabNav li').click(function() {
$('.tabNav li').removeClass('active');
$(this).addClass('active');
$('.tab-content').hide();
var activeTab = $(this).find('a').attr('href');
$(activeTab).fadeIn();
return false;
});
});
$('#Year').change(function() {
var filter = $(this).val();
filterList(filter);
});
// Recruiters filter function
function filterList(value) {
// alert(value);
var list = $(".langFundContent");
$(list).hide();
if (value == "All") {
$(".langFundContent").each(function(i) {
$(this).fadeIn();
});
} else {
// *=" means that if a data-custom type contains multiple values, it will find them
$(".langFundContentList").find(".langFundContent[data-year=" + value + "]").each(function(i) {
// console.log($(this));
$(this).fadeIn();
$(this).find(".tab-content:first").fadeIn();
$(this).find(".tabNav li:first").addClass("active");
});
}
}
</script>
</body>
</html>