<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>上海青年艺术博览会</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css?v=2" rel="stylesheet" type="text/css">
<link href="css/layout.css?v=4" rel="stylesheet" type="text/css">
<link href="css/index.css?v=1" rel="stylesheet" type="text/css">
<link href="css/BannerSlide.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<div class="bar-tit">
<a class="navbar-brand" href="#"><img src="images/logo3.png" alt=""/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto bar-ul">
<li class="nav-item bar-li">
<a class="nav-link" href="index.html">首页</a>
</li>
<li class="nav-item bar-li dropdown">
<a class="nav-link dropdown-toggle" href="about2018.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">关于展会</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item active" href="about2019.html">2019青艺博</a>
<a class="dropdown-item" href="about2018.html">2018青艺博</a>
<a class="dropdown-item" href="about2017.html">2017青艺博</a>
<a class="dropdown-item" href="about2016.html">2016青艺博</a>
<a class="dropdown-item" href="about2015.html">2015青艺博</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="aboutforum.html">论坛</a>
</div>
</li>
<li class="nav-item bar-li active">
<a class="nav-link" href="artist2018.html">合作艺术家</a>
</li>
<li class="nav-item bar-li">
<a class="nav-link" href="http://www.shyaf.com/signup">参展报名</a>
</li>
<li class="nav-item bar-li">
<a class="nav-link" href="partner.html">合作伙伴</a>
</li>
<li class="nav-item bar-li">
<a class="nav-link" href="contact.html">联系我们</a>
</li>
</ul>
</div>
</div>
</nav>
<main role="main" class="container">
<div class="jumbotron">
<div class="homeBanner">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="images/banner2020-1.jpg"/></div>
<div class="swiper-slide"><img src="images/banner2018-2-01.jpg"/></div>
<div class="swiper-slide"><img src="images/banner2018-L-01.jpg"/></div>
</div>
<div class="pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
<div class="row tab">
<div class="col-md-3 col-sm-6 col-6">
<div class="tabOFF">
<a href="artist2018.html">2018艺术家</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-6">
<div class="tabOFF">
<a href="artist2017.html">2017艺术家</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-6">
<div class="tabOFF">
<a href="artist2016.html">2016艺术家</a>
</div>
</div>
<div class="col-md-3 col-sm-6 col-6">
<div class="tabON">
<a href="artist2015.html">2015艺术家</a>
</div>
</div>
</div>
<div class="paragraph">
</div>
</main>
<div class="bottom"><span><br>上海青年艺术博览会 © 版权所有 | <a href="http://www.beian.miit.gov.cn" target="_blank" style="color: #eee;">沪ICP备15011673号</a><br> 沪公网安备31010502001539号</span></div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-3.2.1.slim.min.js"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/swiper3.07.jquery.min.js"></script>
<script src="js/index.js?t=1"></script>
<script src="js/pinyin/pinyin_dict_firstletter.js"></script>
<script src="js/pinyin/pinyinUtil.js"></script>
<script src="js/swiper3.07.jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var mySwiper = new Swiper('.swiper-container',{
calculateHeight:true,
resizeReInit:true,
pagination:".pagination",
autoplay:5000,
paginationClickable:true,
loop: true,
autoplayDisableOnInteraction:false,
prevButton:'.swiper-button-prev',
nextButton:'.swiper-button-next',
});
});
var sidebar = new IndexSidebar()
sidebar.on('charChange', function (ch) {
$(window).scrollTop($("#zj_"+ch).offset().top-80);
});
var character = new Array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","X","Y","Z");
$.ajax({
//请求方式
type:"GET",
//文件位置
url:"dic/2015.json?t=1",
//返回数据格式为json,也可以是其他格式如
dataType: "json",
//请求成功后要执行的函数，拼接html
success: function(data){
for(var a=0;a<character.length;a++){
var py=character[a];
var pys=new Array();
for(var i=0;i<data.length;i++){
var npy=pinyinUtil.getFirstLetter(data[i], false);
if(py==npy.substring(0,1)){
pys.push(data[i]);
data.splice(i--,1);
}
}
addHtml(py,pys);
}
},
error: function(e){
alert(JSON.stringify(e));
}
});
function addHtml(type,data){
if(data.length==0){
return;
}
var ht='<div class="title-bar" id="zj_'+type+'">'+type+'</div><div class="row">';
var elemtClass='';
for(var i=0;i<data.length;i++){
if(i==11&&data.length!=12){
elemtClass='paragraph-non';
}
ht+='<div class="col-lg-2 col-md-2 col-sm-3 col-4 paragraph-row '+elemtClass+'">'+data[i]+'</div>';
}
if(elemtClass!=''){
ht+='<div class="col-lg-2 col-md-2 col-sm-3 col-4 paragraph-row"><a href="javascript:void(0)" onClick="showAll(this)">查看更多</a></div>';
}
ht+='</div><div class="bottom-line"></div>';
$(".paragraph").append(ht);
}
function showAll(element){
if($(element).text()=='查看更多'){
$(element).text('收起');
$(element).parent().parent().find(".paragraph-non").each(function(){
$(this).addClass("paragraph-show");
$(this).removeClass("paragraph-non");
});
}else{
$(element).text('查看更多');
$(element).parent().parent().find(".paragraph-show").each(function(){
$(this).addClass("paragraph-non");
$(this).removeClass("paragraph-show");
});
}
}
</script>
</body>
</html>