时间戳

首页 > 解决方案 > 伪活动类在 scss 文件中不起作用

html - 伪活动类在 scss 文件中不起作用

问题描述

不工作

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

 <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;
                 } 
               }
                             
         }

无论您使用悬停还是聚焦，它都会起作用，但活动的伪类尚未进行，任何人都可以提供帮助

标签： htmlcsssasscss-selectorsnavigation

解决方案

您在伪类和 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>

推荐阅读