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

问题描述

#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 代码，每个功能都可以正常工作，例如背景颜色的变化和悬停时的文本、背景的颜色变化和点击时的文本。突出显示活动页面栏是我无法使其工作的唯一功能。

它不是本地博客导航页面栏。这是一个放置在#header（公司徽标）下方的标题中的迷你应用程序html。

标签： htmlcssblogger

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

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

问题描述

解决方案

推荐阅读