javascript - 翻页，当前站点居中

Question

我在尝试弄清楚如何做到这一点时遇到了问题 - 我想进行翻页，并且事件页面将保持在分页的中心。

您知道任何示例或如何使其发挥作用吗？

.active {
  background: red
}

<div class="w3-bar">
 
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">5</a>
  <a href="#" class="w3-button active">1</a>
  <a href="#" class="w3-button">2</a>
  <a href="#" class="w3-button">3</a>
 
</div>
<div class="w3-bar">
 
  <a href="#" class="w3-button">5</a>
  <a href="#" class="w3-button">1</a>
  <a href="#" class="w3-button active">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
 
</div>
<div class="w3-bar">
 
  <a href="#" class="w3-button">1</a>
  <a href="#" class="w3-button">2</a>
  <a href="#" class="w3-button active">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button">5</a>
 
</div>
<div class="w3-bar">
 
  <a href="#" class="w3-button">2</a>
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button active">4</a>
  <a href="#" class="w3-button">5</a>
  <a href="#" class="w3-button">1</a>
  
</div>
<div class="w3-bar">
 
  <a href="#" class="w3-button">3</a>
  <a href="#" class="w3-button">4</a>
  <a href="#" class="w3-button active">5</a>
  <a href="#" class="w3-button">1</a>
  <a href="#" class="w3-button">2</a>
  
</div>

Answer 1

这是你的解决方案

有问题请告诉我

只需将这段代码复制并粘贴到 index.html 中

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>.active {
  background: red;
  color:#FFF;
}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="w3-bar">
    <span id="active-4"></span>
    <span id="active-5"></span>
    <span id="active-1"></span>
    <span id="active-2"></span>
    <span id="active-3"></span>
</div>
<script>
    var getUrlParameter = function getUrlParameter(sParam) {
        var sPageURL = decodeURIComponent(window.location.search.substring(1)),
            sURLVariables = sPageURL.split('&'),
            sParameterName,
            i;
        for (i = 0; i < sURLVariables.length; i++) {
            sParameterName = sURLVariables[i].split('=');

            if (sParameterName[0] === sParam) {
                return sParameterName[1] === undefined ? true : sParameterName[1];
            }
        }
    };
    var page = parseInt(getUrlParameter('page'));
    if(!page) page = 1;
    for(i=1;i<6;i++){

        a_class = "w3-button";
        if(i==1) a_class = a_class+' active';
        $('#active-'+i).html('<a href="a.php?page='+page+'" class="'+a_class+'" id="active-1">'+page+'</a>');
        if(page==5)page = 1;
        else page=page+1;
    }
</script>