伪活动类在 scss 文件中不起作用答案

【问题标题】：Pseudo active class not working in scss file伪活动类在 scss 文件中不起作用
【发布时间】：2021-11-22 00:07:43
【问题描述】：

这是我的导航和徽标的简单标题

 <header>
    <div class="logo" style="width: 11%;">
        <img src="Images/logo.png" style="width: 100%;">
    </div>
    <nav>
        <ul>
            <li>
                <a href="#" >HOME</a>
            </li>
            <li>
                <a href="#">ABOUT US</a>
            </li>
            <li>
                <a href="#">SERVICES</a>
            </li>
            <li>
                <a href="#">CONTACT US</a>
            </li>
            <li>
                <a href="#">TESTIMONIALS</a>
            </li>
            <li>
                <a href="#">FAQ</a>
            </li>
            <li>
                <a href="#">CONTACT US</a>
            </li>
        </ul>   
    </nav>
</header>

我的 CSS 中的活动类不工作，而其他人工作正常

     li
        {
            display: inline-block;
            font-size: 18px;      
          
            a
              {
                display: inline-block;
                color:$secondary;
                padding: 17px;

                &:active
                 {
                     padding: 10px; 
                     background : blue;
                     font-weight: bold;
                 } 
               }
                             
         }

无论您使用悬停还是聚焦都可以，但活动伪类不在进行中谁能帮忙

【问题讨论】：

$secondary 是我为颜色创建的变量
它按预期工作。
不，你不能在上面的图片中看到
您在问题中发布的代码正在运行。看这里imgur.com/TBWKvpv
我认为浏览器不希望我工作

标签： html css sass css-selectors navigation

【解决方案1】：

您在伪类和 CSS 类之间的混淆，您需要的是在活动列表项上设置一个 CSS 类，为此您需要添加一些 JS

var header = document.getElementById("myDIV");
var btns = header.getElementsByClassName("li");
for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
    });
}

 li{
      display: inline-block;
      font-size: 18px;      
      a
      {
        display: inline-block;
        color: gray;
        padding: 17px;
      }
                             
  }
.active{
    padding: 10px; 
    background : blue;
    font-weight: bold;
 }

 <header>
    <div class="logo" style="width: 11%;">
        <img src="Images/logo.png" style="width: 100%;">
    </div>
    <nav>
        <ul id="myDIV">
            <li class="li active">
                <a href="#" >HOME</a>
            </li>
            <li class="li">
                <a href="#">ABOUT US</a>
            </li>
            <li class="li">
                <a href="#">SERVICES</a>
            </li>
            <li class="li">
                <a href="#">CONTACT US</a>
            </li>
            <li class="li">
                <a href="#">TESTIMONIALS</a>
            </li>
            <li class="li">
                <a href="#">FAQ</a>
            </li>
            <li class="li">
                <a href="#">CONTACT US</a>
            </li>
        </ul>   
    </nav>
</header>

【讨论】：