Javascript HTML/CSS/JS-如何在导航栏中将网站中的当前页面突出显示为不同的颜色？

这是我正在使用HTML、CSS和JavaScript开发的网站

目前，该网站位于主页中。我希望“主页”按钮以不同的颜色突出显示，以便用户在忘记时识别他们所处的页面。即使在所有其他页面中，我也希望该特定页面以不同的颜色突出显示。我该怎么办？下面是我的主页HTML代码、CSS代码和Java脚本代码（请注意，对于所有其他HTML页面，每个页面都被称为活动页面，而不是所有页面中的主页都被称为活动页面）

函数myFunction（）{
document.getElementsByClassName（“topnav”）[0].classList.toggle（“响应”）；
}

正文{
背景：#AED6F1！重要；
位置：相对位置；
保证金：0；
垫底：6rem；
最小高度：100%；
}
h4{
字体大小：25px！重要；
字体风格：粗体！重要；
颜色：黄色！重要；
字体系列：冲击，木炭，无衬线！重要；
}
.a{
字体大小：30px！重要；
字体风格：粗体！重要；
颜色：#008000！重要；
字体系列：'独立花'，草书！重要；
}
.固定导航杆{
位置：固定；
排名：0；
左：0；
z指数：9999；
宽度：100%；
高度：50px；
背景色：#00a087；
}
页脚{
位置：固定；
底部：0；
宽度：100%；
高度：30px；/*页脚高度*/
背景：黑色；
颜色：白色；
}
ul.topnav{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景颜色：橙色；
边界：5px；
}
/*将列表项并排浮动*/
ul.topnav li{float:左；}
/*设置列表项内链接的样式*/
ul.topnav li a{
显示：内联块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
过渡：0.3s；
字号：17px；
}
/*更改悬停时链接的背景色*/
ul.topnav li a:hover，ul.topnav li active a{背景色：红色；}
/*隐藏包含应在小屏幕上打开和关闭topnav的链接的列表项*/
ul.topnav li.icon{显示：无；}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav li:not（：第一个子项）{display:none；}
ul.topnav li.icon{
浮动：对；
显示：内联块；
}
}
/*当用户单击图标时，“responsive”类将通过JavaScript添加到topnav中。这个类使topnav在小屏幕上看起来很好*/
@媒体屏幕和屏幕（最大宽度：768px）{
ul.topnav.responsive{位置：相对；}
ul.topnav.responsive li.icon{
位置：绝对位置；
右：0；
排名：0；
}
ul.topnav.li{
浮动：无；
显示：内联；
}
ul.topnav.lia{
显示：块；
文本对齐：左对齐；
}
.固定导航杆{
位置：固定；
排名：0；
左：0；
z指数：9999；
宽度：100%；
高度：50px；
背景色：#00a087；
}
}
}

佐克队


















我们是一个专业的游戏社区，致力于为您提供最好的游戏视频！
看看我们最新的视频！
©2016 Team Zork，Inc

---

您只需在所有页面中添加这个class=“active”大约一页，然后应用页面，很快..

您在CSS中编写了

li active

，而不是

li.active

更换

ul.topnav li a:hover，ul.topnav li active a{背景色：红色；}

与

ul.topnav li a:hover，ul.topnav li.active a{背景色：红色；}

希望能有帮助

---

函数myFunction（）{
document.getElementsByClassName（“topnav”）[0].classList.toggle（“响应”）；
}

正文{
背景：#AED6F1！重要；
位置：相对位置；
保证金：0；
垫底：6rem；
最小高度：100%；
}
h4{
字体大小：25px！重要；
字体风格：粗体！重要；
颜色：黄色！重要；
字体系列：冲击，木炭，无衬线！重要；
}
.a{
字体大小：30px！重要；
字体风格：粗体！重要；
颜色：#008000！重要；
字体系列：'独立花'，草书！重要；
}
.固定导航杆{
位置：固定；
排名：0；
左：0；
z指数：9999；
宽度：100%；
高度：50px；
背景色：#00a087；
}
页脚{
位置：固定；
底部：0；
宽度：100%；
高度：30px；/*页脚高度*/
背景：黑色；
颜色：白色；
}
ul.topnav{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景颜色：橙色；
边界：5px；
}
/*将列表项并排浮动*/
ul.topnav li{float:左；}
/*设置列表项内链接的样式*/
ul.topnav li a{
显示：内联块；
颜色：#F2F2；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
过渡：0.3s；
字号：17px；
}
/*更改悬停时链接的背景色*/
ul.topnav li a:hover，ul.topnav li.active a{背景色：红色；}
/*隐藏包含应在小屏幕上打开和关闭topnav的链接的列表项*/
ul.topnav li.icon{显示：无；}
@媒体屏幕和屏幕（最大宽度：680px）{
ul.topnav li:not（：第一个子项）{display:none；}
ul.topnav li.icon{
浮动：对；
显示：内联块；
}
}
/*当用户单击图标时，“responsive”类将通过JavaScript添加到topnav中。这个类使topnav在小屏幕上看起来很好*/
@媒体屏幕和屏幕（最大宽度：768px）{
ul.topnav.responsive{位置：相对；}
ul.topnav.responsive li.icon{
假定
enter code here

<li><a href = "index.html"><img src = "https://s32.postimg.org/euqw9qysl/Picture11.png" width="30px" height="30px"></a></li>
  <li class = "active"><a href="index.html">Home</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="apply.html">Apply</a></li>
  <li><a href="blog.html">Blog</a></li>
  <li><a href="contact.html">Contact</a></li>


<li><a href = "index.html"><img src = "https://s32.postimg.org/euqw9qysl/Picture11.png" width="30px" height="30px"></a></li>
  <li ><a href="index.html">Home</a></li>
  <li class = "active"><a href="about.html">About</a></li>
  <li><a href="apply.html">Apply</a></li>
  <li><a href="blog.html">Blog</a></li>
  <li><a href="contact.html">Contact</a></li>

<li class = "active"><a href="index.html" style="color:rgb(12,12,12);">Home</a></li>

<li class="active" ><a href="index.html">Home</a></li>

.topnav>li.active>a, .topnav>li.active>a:focus, .topnav>li.active>a:hover{
 //change background color on hover focus
}

.topnav>li.active>a{
color:whatever you want
}

 <li class = "active"><a href="index.html">Home</a></li>
 <li><a href="about.html">About</a></li>
 <li><a href="apply.html">Apply</a></li>
 <li><a href="blog.html">Blog</a></li>
 <li><a href="contact.html">Contact</a></li>

<li ><a href="index.html">Home</a></li>
<li class = "active"><a href="about.html">About</a></li>
<li><a href="apply.html">Apply</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>

<li ><a href="index.html">Home</a></li>
<li ><a href="about.html">About</a></li>
<li class = "active"><a href="apply.html">Apply</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>

<li ><a href="index.html">Home</a></li>
<li ><a href="about.html">About</a></li>
<li ><a href="apply.html">Apply</a></li>
<li class = "active"><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>

<li ><a href="index.html">Home</a></li>
<li ><a href="about.html">About</a></li>
<li ><a href="apply.html">Apply</a></li>
<li><a href="blog.html">Blog</a></li>
<li  class = "active"><a href="contact.html">Contact</a></li>

ul.topnav li a:hover, ul.topnav li.active a {background-color: red;}