实现功能:新闻栏目切换、根据发布年份查询新闻、翻页
效果截图:
html:
<div class="channelNews clearfix mt60 content2">
<div class="chanJdalTit clearfix">
<!--新闻栏目标题,对应新闻动态、党建工会、学术活动部分-->
<ul class="chanJdalTitLCon clearfix fl">
<channellist id="c" channelid="$TopChannelID" depth="1">
<eq name="c.ChannelID" value="$ChannelID">
<li class="current" data-value="{$ChannelID}">
<else/>
<li class="" data-value="{$ChannelID}">
</eq>
<a href="{$c.ChannelUrl}">{$c.ChannelName}</a></li>
</channellist>
</ul>
<!--查询年份部分,对应右侧的年份-->
<div class="chanJdalTitRCon clearfix fr">
<p class="chanJdalTitRTit fl"><img src="{$Images}time.png" alt="">时间:</p>
<div class="fr chanJdalTitRMain">
<p class="title" id="currentYear">不限</p>
<ul class="main" id="year">
<li class="current" data-year="不限">不限</li>
</ul>
</div>
</div>
</div>
<div class="chanNewsBody clearfix">
<div class="chanNewsLBody">
<!--新闻列表主体部分-->
<ul class="chanNewsCon mt40 clearfix enlargeLi" id="article">
</ul>
<!--页码-->
<div class="page mt70" id="articlePage">
</div>
</div>
</div>
</div>
js:
<script>
$(function (){
$(".chanJdalTitRMain .title").click(function (){
let display=$(".chanJdalTitRMain .main").css("display");
if(display=="none"){
$(".chanJdalTitRMain .main").show();
}else{
$(".chanJdalTitRMain .main").hide();