如何使活动页面栏保持突出显示？

Question

#menu ul{
margin:0px;
padding:0px;
list-style:none
}
#menu li a{
float:left;
display:inline-block;
width:210px;
margin:0px 0px 3px 0px;
background:#0093dd;
color:#fff;
border:5px solid #dd127b;
line-height:50px;
font-size:1.3em;
font-weight:bold;
letter-spacing:.1em;
text-transform:uppercase;
text-decoration:none
}
#menu li a:hover{
background:#fff;
color:#0093dd;
text-decoration:none
}
#menu li a:active{
background:#dd127b;color:#fff;
text-decoration:none
}

<div id="menu">
    <ul>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    <li><a href="..." title="...">...</a></li>
    </ul>
    </div>

亲爱的开发人员，请帮助我正确设置代码（不使用JavaScript），以突出显示*活动页面栏。

*背景：#fff;颜色：＃0093dd;文本修饰：无

我认为我使用的部分代码不正确或不完整。

使用当前的CSS和html代码，每个功能都可以正常工作，例如悬停时背景和文本的颜色更改，单击时背景和文本的颜色更改。突出显示活动页面栏是我无法使其正常工作的唯一功能。

这不是本机博客的导航页面栏。它是一个迷你应用html，位于#header（公司徽标）正下方的标题中。

Answer 1

简而言之，您必须使用一些Javascript魔术：1.使用window.location对象检测活动页面的URL2.用a查找对应的var item =document.querySelector("a[href=<found url is here>]")标签3.添加活动类别item.classList.add("active")4.在您的CSS代码中描述. active{...}类