为什么单击此代码时不会使页码变灰？答案

【问题标题】：Why is this code not making the page number grey when it's clicked on?为什么单击此代码时不会使页码变灰？
【发布时间】：2017-12-20 22:19:46
【问题描述】：

我尝试制作一个寻呼机，我可以在其中单击页码，然后颜色变为灰色。但它似乎惨败。为什么此代码没有使单击的寻呼机号码变为灰色？我现在正在尝试修复它，希望它会起作用。

function my(i) {
    document.getElementsByClassName('number')[0].removeAttribute("id");
    i.id = "act";
}

.pager li.active > a:active {
    color: grey !Important;
}
        
.pager > li > a.right-arrow {
    margin-left: 410px;
    width: 30px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px #9ecaed;
    font-size: 15px;
    padding: 7px;
    line-height: 1;
}

.pager > li > a.left-arrow {
    margin-right: 410px;
    width: 30px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px #9ecaed;
    font-size: 15px;
    transform: rotate(180deg);
    padding: 7px;
    line-height: 1;
}
        
.number {  
    border-color: white !Important;
    padding: 5px !Important;
}

a {
    color: black !Important;
}

#act {
    color: red !Important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center">
    <ul class="pager">
        <li><a href="#" class="left-arrow">➜</a></li>
        <li><a href="" class="number" id="act" onclick='my(this);'>1</a></li>
        <li><a href="" class="number"  onclick='my(this);'>2</a></li>
        <li><a href="" class="number"  onclick='my(this);'>3</a></li>
        <li class="number">...</li>
        <li><a href="" class="number"  onclick='my(this);'>7</a></li>
        <li><a href="" class="number"  onclick='my(this);'>8</a></li>
        <li><a href="" class="number"  onclick='my(this);'>9</a></li>
        <li><a href="" class="right-arrow">➜</a></li>
    </ul>
</div>

【问题讨论】：

如果你不使用javascript，为什么还要标记它？
我是 sn-p 的新手。对不起。我复制粘贴了一个示例。我来自印度尼西亚，英语不好抱歉。
如果您希望在单击某物时发生某事，您可能需要某种事件侦听器/处理程序来寻找单击并以适当的操作响应。我在您当前的代码中没有看到类似的内容。我建议您进一步阅读 (stackoverflow.com/questions/6348494/addeventlistener-vs-onclick) 并提出更完整的问题。

标签： html css

【解决方案1】：

您已将其设置为不用于背景的颜色，这就是它不产生灰色的原因

function my(i){
  document.getElementById('act').removeAttribute("id");
 i.id = "act";
}

.pager > li > a {
        color: black !Important;
    }
    .pager >li:active > a:active {
        color: grey !Important;
    }
    
        .pager > li > a.right-arrow {
            margin-left: 410px;
            width: 30px;
            border-radius: 50%;
            box-shadow: 0px 0px 5px #9ecaed;
            font-size: 15px;
            padding: 7px;
            line-height: 1;
        }
    
        .pager > li > a.left-arrow {
            margin-right: 410px;
            width: 30px;
            border-radius: 50%;
            box-shadow: 0px 0px 5px #9ecaed;
            font-size: 15px;
            transform: rotate(180deg);
            padding: 7px;
            line-height: 1;
        }
    
    .number {  
        border-color: white !Important;
        padding: 5px !Important;
    }
    #act{
        color: grey !Important;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center">
    <ul class="pager">
        <li><a href="#" class="left-arrow " onclick='my(this);'>➜</a></li>
        <li><a href="" class="number" id=act onclick='my(this);'>1</a></li>
        <li><a href="" class="number" onclick='my(this);'>2</a></li>
        <li><a href="" class="number" onclick='my(this);'>3</a></li>
        <li class="number">...</li>
        <li><a href="" class="number" onclick='my(this);'>7</a></li>
        <li><a href="" class="number" onclick='my(this);'>8</a></li>
        <li><a href="" class="number" onclick='my(this);'>9</a></li>
        <li><a href="" class="right-arrow">➜</a></li>
    </ul>
</div>

【讨论】：

【解决方案2】：

稍后出现一个小错字...希望这应该可以...

.pager > li:active > a:active {
    color: grey !Important;
}

Codepen 链接： https://codepen.io/anon/pen/ppbgBw

【讨论】：

是的，只有当你点击它时它才会起作用。单击它时如何使其保持灰色？我需要强调用户所在的页面

【解决方案3】：

对于所有链接，您必须在链接的 href 属性中使用井号 (#)。

这样

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center">
    <ul class="pager">
        <li><a href="#" class="left-arrow">➜</a></li>
        <li><a href="#" class="number">1</a></li>
        <li><a href="#" class="number">2</a></li>
        <li><a href="#" class="number">3</a></li>
        <li class="number">...</li>
        <li><a href="#" class="number">7</a></li>
        <li><a href="#" class="number">8</a></li>
        <li><a href="#" class="number">9</a></li>
        <li><a href="#" class="right-arrow">➜</a></li>
    </ul>
</div>

【讨论】：

我做了，但我不能让它活跃起来。只有当它被点击后它才会恢复为黑色。我该如何解决这个问题？
如果您希望其中一个号码最初处于活动状态，您必须执行以下操作：stackoverflow.com/questions/2147844/…。不知道你是不是这个意思？
如果您希望多个数字具有灰色背景，则必须包含一些 javascript，并在锚点中添加或删除 active 类。像这样的东西：stackoverflow.com/questions/19142653/… 或这样的：jaketrent.com/post/addremove-classes-raw-javascript
我真的尝试将 javascript 附加到我的但它只是没有触发或工作
尝试使用 javascript 更新您的问题。还有，我推广的哪一个场景适合你的问题？ “页面加载时的活跃号码”或“多个活跃号码”？如果您想要我上面提到的场景之一，您的问题（问题描述）需要更新。