当单击“center
”容器或“right
”容器时,我不知道如何更改菜单元素的颜色(单击后返回其状态再次开启)。
目前我的菜单中的 3 行是白色的,我想在单击这些“center
”和“right
”容器时将它们更改为红色。
HTML:
<div class="menu">
<div class="line"></div>
<div class= "container" id= "center">
<h1 style="color:white"><a>LOREM IPSUM<a/></h1>
</div>
<div class="container" id= "right">
<h1 style="color:white"><a>LOREM IPSUM</a></h1>
</div>
菜单元素的 CSS:
.menu .line {
height: 5px;
width: 40px;
background: #fff;
position: absolute;
top: 22.5px;
left: 5px;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
z-index: 100;
}
.menu .line:after, .menu .line:before {
content: ' ';
height: 5px;
width: 40px;
background: #fff;
position: absolute;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.menu .line:before {
top: -10px;
}
.menu .line:after {
bottom: -10px;
}
最佳答案
为你想要的颜色定义新的类,例如
.red {
color: red !important;
}
.green {
color: green !important;
}
然后使用 jQuery 切换它们:
$('#center').click(function() {
$(this).find('h1').toggleClass('red');
});
$('#right').click(function() {
$(this).find('h1').toggleClass('green');
});
注意:如果您使用 CSS 指定原始颜色,则不需要 !important。
关于javascript - 单击时更改元素的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28487626/