使用JS实现网页翻页功能-优快云博客

本文链接：https://blog.youkuaiyun.com/nalan77/article/details/109400007

该博客介绍了如何使用JavaScript配合HTML和CSS实现新闻栏目切换、按年份筛选新闻及关键的翻页功能，提供了相关代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现功能：新闻栏目切换、根据发布年份查询新闻、翻页

效果截图：

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();

js实现翻页