onclick方法后如何更改div的CSS样式答案

【问题标题】：How to change CSS style of div after onclick methodonclick方法后如何更改div的CSS样式
【发布时间】：2013-10-21 13:11:01
【问题描述】：

<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。

有什么建议吗？

它可以工作on this fiddle 但当我在我的浏览器上加载它时不起作用，我是否正确地将 jquery 链接到 html？

如果有任何其他关于如何执行此操作的建议，我愿意接受建议，谢谢！

【问题讨论】：

在页面加载功能上添加css？就像他点击 div 来显示内容，而不是网页加载
我想要一个像这里显示的函数：jsfiddle.net/gSAjV/2
页面加载完毕，div没有背景色，但是想在div点击后添加背景色，突出用户点击的选项
你的小提琴适合我
@Oriol，您可以在点击选项后将背景颜色更改为脚本中提供的固定颜色吗？

标签： javascript jquery html css

【解决方案1】：

这是我的修改：我在您的代码中添加了 .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>

试试这个方法 - version 2

css

.selected {
    background-color : #fff000;
}

$('.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..以防止您在悬停背景颜色中的样式被忽略..

【讨论】：

我添加了它，但是当我点击某个div时它仍然只显示悬停的背景颜色而不是固定的背景颜色
它适用于您提供的演示，但当我将其加载到浏览器时无法使用，我使用提供的 cmets 更新了上面的代码，您看到有什么关闭了吗？
根据萤火虫这是你的错误 - ReferenceError: show is not defined onclick="show('Page1');" 使你的脚本不工作..
请参阅编辑..如果你想支持你的onclick="show('Page3');"，请为show(var string)提供相应的function()...：D
不错！ .ready() 函数成功了。我还能够添加回原来用于切换页面的脚本，现在我能够突出显示与所选页面对应的 div。谢谢！

【解决方案2】：

试试

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

Demo

注意：这只是对另一个答案的改进，因为我不太了解您的问题。

【讨论】：

它在演示中运行良好，我注意到我需要 jquery 才能使此功能正常工作，有没有无需下载 jquery 的方法？

【解决方案3】：

对于这类事情，AngularJS 就派上用场了。

只需将ng-class 添加到您的 div 元素，例如选择，然后将该类与您的 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 文件。我没有特别使用您的课程，因为我认为这样做会对社区有所帮助。

【讨论】：