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>

寻呼转身和当前网站留在中心

1 个答案: