如何在点击方法后更改div的CSS样式

Question

如何在点击方法后更改div的CSS样式

3

<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会显示背景颜色。但是，在单击方法之后，我希望stepbox div保持 ".selected" 样式的背景颜色。这样就可以突出显示用户单击的div。

有什么建议吗？

它在这个fiddle上运行良好，但是当我在浏览器中加载时却不起作用，我是否正确地将jquery链接到html文件中？

如果有其他更好的建议，请告诉我，谢谢！

- Chris

在页面加载函数中添加CSS？比如他点击div来显示内容，而不是网页加载。 - Stephen Raghunath

我想要一个像这里显示的函数：http://jsfiddle.net/gSAjV/2/ - Chris

页面加载完毕后，div元素没有背景颜色，但是当用户点击某个div时，希望能够添加背景颜色以突出显示用户所点击的选项。 - Chris

你的小提琴对我有效。 - Oriol

@Oriol，在点击选项后，您能否将背景颜色更改为脚本中提供的固定颜色？ - Chris

3个回答

1

对于这种情况，AngularJS非常方便。只需将ng-class添加到您的div元素中（例如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文件。我没有特别使用您的类，因为我认为这样做可以更好地帮助社区。

- Edd

1

尝试

$('.step_wrapper').on('click','.step_box',function () {
    $(this).parent().find('.step_box').css('background-color', '');
    $(this).css('background-color', '#fff000');
});

演示

注意：这只是对其他答案的改进，因为我不太了解你的问题。

- Oriol

它在演示中运行良好，我注意到需要jquery才能使此功能正常工作，是否有一种方法可以不下载jquery来实现这个功能？ - Chris

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Olrac · Accepted Answer

这是我的修改：我在你的代码中添加了.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')
});

尝试这个 Fiddle ：

.step_box:hover, #selected_step_box, .QuickStartLong:hover {
    background-color: rgb(184, 225, 252) !important;
}

如您所见，只需在CSS中添加!important即可防止悬停背景颜色样式被忽略。