我正在使用HTML和CSS创建一个水平菜单。 它工作正常。 我无法找到的一件事（在互联网上）是我必须要激活的，当屏幕上显示菜单时，使1项“激活”。
换句话说：在这种情况下，我希望选择“选项3”，使用不同的颜色（例如，白色为背景，红色为字符颜色），而不是其他选项。
我添加了我正在使用的简化代码。
我在哪里需要改变什么？
非常感谢你的帮助。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: linen;
}
.fullBox {
position:inherit;
background-color:transparent;
}
.blockwhite{
display:inline-block;
height:37px;
width:10px6%;
color:white;
border-bottom:none;
}
.fullBoxInner {
position:inherit;
width:100%;
margin:0px auto;
top: 63px;
left: 0px;
}
#menu {
margin-top:0px;
padding:0;
text-align:center;
background-color: #000066C;
}
#menu > div > div {
display:inline-block;
background-color: yellowgreen;
width:19%;
color:#fff;
height:35px;
line-height:35px;
cursor:pointer;
border-bottom:2px solid yellowgreen;
text-align:center;
font-size: 16px;
font-weight: bold;
}
#menu > div > div:hover, .persHoverM {
color:green;
background-color:#F5F5F5;
border-bottom:2px solid red /*green*/;
}
#menu > div > div:active {
color:yellowgreen;
border-bottom:2px solid bleu /*yellowgreen*/;
}
</style>
</head>
<body>
<div class="fullBox" id="menu">
<div class="fullBoxInner">
<div class="persHoverM">Option 1</div>
<div class="persHoverM">Option 2</div>
<div class="persHoverM">Option 3</div>
<div class="persHoverM">Option 4</div>
<div class="persHoverM">Option 5</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
您需要将课程提供给活动项目，例如：
<div class="fullBoxInner">
<div class="persHoverM active">Option 1</div>
<div class="persHoverM">Option 2</div>
<div class="persHoverM">Option 3</div>
<div class="persHoverM">Option 4</div>
<div class="persHoverM">Option 5</div>
</div>
.active {
color: green;
background-color:white;
}
在每个相应的页面上设置它们，它们将显示为活动状态，或者您可以使用javascript / jquery动态更改具有该类的项目
答案 1 :(得分：0)
您可以使用:nth-child选择器。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: linen;
}
.fullBox {
position:inherit;
background-color:transparent;
}
.blockwhite{
display:inline-block;
height:37px;
width:10px6%;
color:white;
border-bottom:none;
}
.fullBoxInner {
position:inherit;
width:100%;
margin:0px auto;
top: 63px;
left: 0px;
}
#menu {
margin-top:0px;
padding:0;
text-align:center;
background-color: #000066C;
}
#menu > div > div {
display:inline-block;
background-color: yellowgreen;
width:19%;
color:#fff;
height:35px;
line-height:35px;
cursor:pointer;
border-bottom:2px solid yellowgreen;
text-align:center;
font-size: 16px;
font-weight: bold;
}
#menu > div > div:hover, .persHoverM {
color:green;
background-color:#F5F5F5;
border-bottom:2px solid red /*green*/;
}
#menu > div > div:active {
color:yellowgreen;
border-bottom:2px solid bleu /*yellowgreen*/;
}
#menu div.persHoverM:nth-child(3) { /* selects third ".persHoverM" class div */
background-color: white;
color: red;
}
</style>
</head>
<body>
<div class="fullBox" id="menu">
<div class="fullBoxInner">
<div class="persHoverM">Option 1</div>
<div class="persHoverM">Option 2</div>
<div class="persHoverM">Option 3</div>
<div class="persHoverM">Option 4</div>
<div class="persHoverM">Option 5</div>
</div>
</div>
</body>
</html>