<html>
<head>
<style type="text/css">
.step_box {
border: 1.0px solid rgb(204, 204, 204);
border-radius: 10.0px 10.0px 10.0px 10.0px;
}
.step_box:hover{
background: rgb(184, 225, 252);
}
.selected {
background-color : #fff000;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
$('.step_wrapper').on('click','.step_box',function () {
$('.step_box').removeClass('selected');
$(this).addClass('selected')
});
</script>
</head>
<body>
<div class="step_wrapper">
<div class="step_box" onclick="show('Page1');"> <span>Content of page 1</span></div>
<div class="step_box" onclick="show('Page2');"> <span>Content of page 2</span></div>
<div class="step_box" onclick="show('Page3');"> <span>Content of page 3</span></div>
</div>
</body>
</html>
现在我在一个父 div 中有 3 个子 div。现在 step_box div 在悬停时显示背景颜色。然而; 在onclick方法之后,我希望stepbox div保持背景颜色为“.selected”的样式。这样它会突出显示用户点击的 div。
有什么建议吗?
它适用于这个小提琴,但当我在浏览器上加载它时不起作用,我是否将 jquery 正确链接到 html?
如果对如何执行此操作有任何其他建议,我愿意接受建议,谢谢!