我正在使用 HTML 和 CSS 创建一个水平菜单。 它工作正常。 我(在 Internet 上)找不到的一件事是我必须做的事情来激活，当菜单显示在屏幕上时使 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>最佳答案
需要给active item赋予class，例如:
<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 的类
关于html - DIV CSS - 水平菜单 - 如何定义选定项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31480095/