[英]How to change CSS style of div after onclick method
<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 divs在悬停时显示背景颜色。 然而; 在onclick方法之后,我希望stepbox div保持背景颜色的样式为“.selected”。 这样它会突出显示用户点击的div。
有什么建议?
它适用于这个小提琴但不是当我在浏览器上加载它时,我是否正确地将jquery链接到html?
如果对于如何做到这一点有任何其他建议,我愿意接受建议,谢谢!
这是我的修订:我在你的代码中添加了.ready()函数..
<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, #selected_step_box, .QuickStartLong: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">
$( document ).ready( function(){
$('.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" > <span>Content of page 1</span></div>
<div class="step_box" > <span>Content of page 2</span></div>
<div class="step_box" > <span>Content of page 3</span></div>
</div>
</body>
</html>
试试这种方法 - 版本2
CSS
.selected {
background-color : #fff000;
}
JS
$('.step_wrapper').on('click','.step_box',function () {
$('.step_box').removeClass('selected');
$(this).addClass('selected')
});
试试这个小提琴 :
.step_box:hover, #selected_step_box, .QuickStartLong:hover {
background-color: rgb(184, 225, 252) !important;
}
正如你所看到的......只是在你的css中添加!重要...以防止你的风格在悬停背景颜色被忽略..
尝试
$('.step_wrapper').on('click','.step_box',function () {
$(this).parent().find('.step_box').css('background-color', '');
$(this).css('background-color', '#fff000');
});
注意:这只是对另一个答案的改进,因为我不太了解你的问题。
对于这种事情,AngularJS非常方便。
只需在div元素中添加一个ng-class
,例如selected,然后将该类与css上的行为相关联。 我会做的事情如下:
<html ng-app="ExampleApp">
<head>
<script src="scripts/angular.min.js"></script>
<script type="text/javascript">
(function() {
var app = angular.module('ExampleApp', []);
app.controller('ExampleController', function(){
this.selected = 0; // or 1 if you want the first to be selected by default
this.isSelected = function(value){
return this.selected === value;
};
this.setSelected = function(value){
this.selected=value;
};
});
})();
</script>
<style type="text/css">
.selected {
color: #000;
}
<style>
</head>
<body>
<div ng-controller="ExampleController as examplectrl">
<div ng-click="examplectrl.setSelected(1)" ng-class="{selected: examplectrl.isSelected(1)}" >
<!-- Your content -->
</div>
<div ng-click="examplectrl.setSelected(2)" ng-class="{selected: examplectrl.isSelected(2)}" >
<!-- Your content -->
</div>
<div ng-click="examplectrl.setSelected(3)" ng-class="{selected: examplectrl.isSelected(3)}" >
<!-- Your content -->
</div>
</div>
</body>
</html>
您需要在文件中包含angular.min.js文件。 我没有特别使用你的课程,因为我认为这样做可以帮助社区更多一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.