首页 / 技术问答 / Html问答列表 / 问答详情

Html 使用 jquery 在分页时激活下一个上一个按钮

我有分页功能，我不知道单击下一个/上一个图标时如何激活它.目前，如果我点击数字，它会显示相应的页面.单击"下一步"时，请帮助显示页面(&A)；上一个按钮以及如何禁用下一个按钮(&amp；如果页面位于第一个位置，则显示上一个图标(&P)；分别为最后一页.请帮忙.下面是我的代码

        jQuery($ => {
  let pageSize = 2;
  let pageCount = Math.ceil($('.content').length / 2);
  
  let $pageContainer = $('.page-container');
  let $pageLinks = $('#pagin li a.page');
  let $prev = $('#prev');
  let $next = $('#next');
  let currentPage = $pageContainer.data('page');

  let setActivePage = page => {
    let start = pageSize * (page - 1);
    let end = pageSize * page;
    $(".content").hide().slice(start, end).show();

    $('#prev').toggleClass('disabled', page <= 1);
    $('#next').toggleClass('disabled', page >= pageCount);
    
    $pageLinks.removeClass("current");
    $pageLinks.eq(page - 1).addClass('current');
    
    $pageContainer.data('page', page);
  }

  setActivePage(currentPage);

  $pageLinks.on('click', e => setActivePage($(e.target).closest('li').index()));

  $prev.on('click', e => setActivePage($pageContainer.data('page') - 1));

  $next.on('click', e => setActivePage($pageContainer.data('page') + 1));
});
    
$(document).ready(function(){   
$(".num1").click(function(){
          $(".beforenum").css('display','none');
          $(".testingbef").css("display","block");
          $(".num4").css("display","block");
          $(".num5").css("display","block");
          $(".num6").css("display","none");
          $(".num7").css("display","none");
          $(".afternum").css("display","block");
          $(".testing").css("display","none");
          $(".testing").css("display","none");        
        })
$(".num4").click(function(){
    $(".testingbef").css("display","block");
    $(".beforenum").css("display","none");
    $(".num6").css("display","none");
})
 $(".num5").click(function(){
    $(".testingbef").css("display","none");
    $(".beforenum").css("display","block");
    $(".num6").css("display","block");
    $(".num4").css("display","block");
    $(".num7").css("display","none");
    
  })
  $(".num6").click(function(){
    $(".num7").css('display','block');
    $(".num4").css("display","none");
    $(".num5").css("display","block");
    $(".testing").css("display","none");
    $(".afternum").css('display','block');
    
  })
  $(".num7").click(function(){
    $(".afternum").css('display','none');
    $(".testing").css("display","block");
    $(".num5").css("display","none");
    
  })
  $(".num10").click(function(){
    $(".afternum").css('display','none');
    $(".testing").css("display","block");
    $(".num7").css("display","block");
    $(".num6").css("display","block");
    $(".testingbef").css("display","none");
    $(".num4").css("display","none");
    $(".num5").css("display","none");
    $(".beforenum").css("display","block");
    
  })
});

$(document).ready(function(){   
    $('<a class="beforenum">...</a>').on('click', function(e){ 
    alert();
               console.log('prev');
               api.page('previous').draw('page'); 
               e.preventDefault();
           })

});
.content {
  margin: 1px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
  background-color: gray;
}

#pagin {
  clear: both;
  padding: 0;
  width: 500px;
  margin: 0 auto;
}

#pagin li {
  float: left;
  margin-right: 10px;
}

#pagin li a {
  display: block;
  color: #717171;
  font: bold 11px;
  text-shadow: 0px 1px white;
  padding: 5px 8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  background: #f9f9f9;
  background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a.current {
  color: white;
  text-shadow: 0px 1px #3f789f;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  background: #7cb9e5;
  background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8', GradientType=0);
}

#pagin li a.disabled {
  pointer-events: none;
  opacity: 0.4;
}

#pagin li a:hover {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  background: #fff;
  background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a:active,
#pagin li a.current:active {
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
}

#pagin li a.current:hover {
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  background: #99cefc;
  background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8', GradientType=0);
}

li {
  list-style-type: none;
}

.testing{
display:none;}

.beforenum{
display:none;}

.num6{display:none;}
.num7{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container" data-page="1">
  <div class="content">1 I have some content</div>
  <div class="content">2 I have some content</div>
  <div class="content">3 I have some content</div>
  <div class="content">4 I have some content</div>
  <div class="content">5 I have some content</div>
  <div class="content">6 I have some content</div>
  <div class="content">7 I have some content</div>
  <div class="content">8 I have some content</div>
  <div class="content">9 I have some content</div>
  <div class="content">10 I have some content</div>
  <div class="content">11 I have some content</div>
  <div class="content">12 I have some content</div>
  <div class="content">13 I have some content</div>
  <div class="content">14 I have some content</div>
  <div class="content">15 I have some content</div>
  <div class="content">16 I have some content</div>
  <div class="content">17 I have some content</div>
  <div class="content">18 I have some content</div>
  <div class="content">19 I have some content</div>
  <div class="content">20 I have some content</div>
  <div class="content">21 I have some content</div>
  <div class="content">22 I have some content</div>
  <div class="content">23 I have some content</div>
  <div class="content">24 I have some content</div>
</div>
<div  id="pagin">
<ul>
  <li>
    <a href="#" id="prev">
      <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
      </svg>
    </a>
  </li>
  <li class="num1"><a class="page current" href="#">1</a></li>
  <li class="beforenum"><a class="page" href="#" >...</a></li> 
  <li class="testingbef"><a class="page" href="#">2</a></li>
  <li class="testingbef"><a class="page" href="#">3</a></li>  
  <li class="num4"><a class="page" href="#">4</a></li>
  <li class="num5"><a class="page" href="#">5</a></li>
  <li class="num6"><a class="page" href="#">6</a></li>
  <li class="num7"><a class="page" href="#">7</a></li>
  <li class="afternum"><a class="page" href="#" >...</a></li>  
  <li class="testing"><a class="page" href="#">8</a></li>
  <li class="testing"><a class="page" href="#">9</a></li>
  <li class="num10"><a class="page" href="#">10</a></li>
  <li>
    <a href="#" id="next">
      <svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
      </svg>
    </a>
  </li>
</ul>
</div>

推荐答案

要基于当前页面启用/禁用#prev和#next链接，您可以在showPage函数中执行判断，该函数向链接中添加设置pointer-events: none的类.

还要注意使用slice()而不是显式循环来隐藏/显示与当前页面相关的.content个元素.

Update:

单击下一步(&A)；上一个按钮如何显示相应页面

要实现这一点，请更改您的逻辑，以便设置页面的功能也会更新UI-ie.显示当前页面的.content，设置活动页面按钮状态和上一页/下一页的禁用状态.

从这里开始，您只需要记录当前的页码，以便在单击"上一页"/"下一页"时可以增加/减少它，我在容器中使用了data()属性来记录.content个元素.然后可以将其传递给设置活动页面的函数.

try 以下操作:

jQuery($ => {  
  let $pageContainer = $('.page-container');
  let $content = $pageContainer.children('.content');
  let $pageLinks = $('#pagin li a.page');
  let $prev = $('#prev');
  let $next = $('#next');
  
  let pageSize = 2;
  let pageCount = Math.ceil($('.content').length / 2);
  let currentPage = $pageContainer.data('page') || 1;

  let setActivePage = page => {
    let start = pageSize * (page - 1);
    let end = pageSize * page;
    $content.hide().slice(start, end).show();

    $prev.toggleClass('disabled', page <= 1);
    $next.toggleClass('disabled', page >= pageCount);    
    $pageLinks.removeClass("current").eq(page - 1).addClass('current');    
    $pageContainer.data('page', page);
  }

  setActivePage(currentPage);

  $pageLinks.on('click', e => setActivePage($(e.target).closest('li').index()));
  $prev.on('click', e => setActivePage($pageContainer.data('page') - 1));
  $next.on('click', e => setActivePage($pageContainer.data('page') + 1));
});
.content {
  margin: 1px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
  background-color: gray;
}

#pagin {
  clear: both;
  padding: 0;
  width: 400px;
  margin: 0 auto;
}

#pagin li {
  float: left;
  margin-right: 10px;
}

#pagin li a {
  display: block;
  color: #717171;
  font: bold 11px;
  text-shadow: 0px 1px white;
  padding: 5px 8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  background: #f9f9f9;
  background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a.current {
  color: white;
  text-shadow: 0px 1px #3f789f;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  background: #7cb9e5;
  background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8', GradientType=0);
}

#pagin li a.disabled {
  pointer-events: none;
  opacity: 0.4;
}

#pagin li a:hover {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  background: #fff;
  background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a:active,
#pagin li a.current:active {
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
}

#pagin li a.current:hover {
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  background: #99cefc;
  background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8', GradientType=0);
}

li {
  list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container">
  <div class="content">1 I have some content</div>
  <div class="content">2 I have some content</div>
  <div class="content">3 I have some content</div>
  <div class="content">4 I have some content</div>
  <div class="content">5 I have some content</div>
  <div class="content">6 I have some content</div>
  <div class="content">7 I have some content</div>
  <div class="content">8 I have some content</div>
  <div class="content">9 I have some content</div>
  <div class="content">10 I have some content</div>
  <div class="content">11 I have some content</div>
  <div class="content">12 I have some content</div>
  <div class="content">13 I have some content</div>
  <div class="content">14 I have some content</div>
  <div class="content">15 I have some content</div>
  <div class="content">16 I have some content</div>
</div>

<ul id="pagin">
  <li>
    <a href="#" id="prev">
      <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
      </svg>
    </a>
  </li>
  <li><a class="page current" href="#">1</a></li>
  <li><a class="page" href="#">2</a></li>
  <li><a class="page" href="#">3</a></li>
  <li><a class="page" href="#">4</a></li>
  <li><a class="page" href="#">5</a></li>
  <li><a class="page" href="#">6</a></li>
  <li><a class="page" href="#">7</a></li>
  <li><a class="page" href="#">8</a></li>
  <li>
    <a href="#" id="next">
      <svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
      </svg>
    </a>
  </li>
</ul>

Html相关问答推荐

有没有可能设置div的边框宽度相对于其父宽度和高度？'

当表头包含特殊字符时，R Quarto发布的HTML表中不必要的大列宽

垂直页眉，每行只显示一个使用css的字母

更改垫子输入的涟漪 colored颜色

如何使用CSS创建文件夹选项卡的形状？

仅在过渡之前删除填充

如何使div填充父项的剩余高度

与窗高匹配的响应式正方形网格

调整 Rmarkdown 输出的 html_document 的标题和副标题之间的间距

在 flexbox 中使用 spacer 是否有效

在DIV上应用梯度模糊未如预期工作

在React中如何处理HTML本地日期输入？

需要帮助个性化我的 CSS 导航栏：如何在鼠标悬停时突出显示
  • 元素？

    • 如何垂直平移一个元素，使其新位置位于另外两个元素之间？

    在身体外部创建 tanget 45° div

    我应该如何使这个带有标签的隐藏复选框可访问

    在中心而不是边界处填充 svg 的背景

    弹出窗口溢出溢出：自动，我不明白为什么

    隐藏在标题后面的下拉菜单

    我可以将两个元素之间的所有空间都放在弹性框或网格中吗？

    实用课程推荐
    相关教程推荐
    休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

    © 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630