我希望用彩色方 block 突出显示事件菜单项。
.main-menu ul {
padding: 0px;
margin: 0px;
text-align: center;
}
.main-menu li {
list-style: none;
display: inline-block;
padding: 40px 0;
}
.main-menu a {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 14px;
margin-right: 5px;
padding: 5px 5px;
margin: 0;
border-radius: 3px;
/*color: #fff;*/
line-height: 24px;
display: inline-block;
}
.main-menu a:hover {
background-color: #F78E21;
color: #fff;
}
<div class="main-menu">
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="products.html">Projects</a></li>
<li><a href="contact-us.html">Gallery</a></li>
<li><a href="contact-us.html">TV Appearances</a></li>
<li><a href="contact-us.html">Events</a></li>
<li><a href="contact-us.html">Links</a></li>
<li><a href="contact-us.html">Testimonials</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>
</div>
是吗?
.main-menu a:hover,
.main-menu a.active{
background-color: #F78E21;
color: #fff;
}
如果实际上没有 class="active"
并询问如何为每个页面动态添加它,那将是一个大问题。好吧,如果它都是静态代码,那么只需在每个页面上手动添加它。如果它在 CMS 中,则寻找适用于该平台的解决方案。如果您正在寻找 Javascript 解决方案,请查看这篇文章 jQuery add class .active on menu
我是一名优秀的程序员,十分优秀!