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

<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。如何在onclick方法后更改div的CSS样式

有什么建议吗？

它的工作原理on this fiddle但不是当我在我的浏览器上加载它，我是否正确链接jQuery的HTML？

如果对此有任何其他建议，欢迎提供建议，谢谢！

来源

2013-10-14 Chris

在页面加载函数中添加css？像他点击div显示内容，而不是网页加载 –

我想要一个像这里显示的功能：http://jsfiddle.net/gSAjV/2/ – Chris

页面加载和divs没有背景颜色，但随后想要在点击div后添加背景颜色以突出显示用户点击的选项 – Chris

这是我的版本：我加入。就绪（）函数的代码..

<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; 
}

，你可以see..just在css..to添加重要防止您的风格悬停背景色被忽略..

来源

2013-10-14 01:56:15 Olrac

我添加了它，但它仍然只显示悬停的背景颜色，而不是固定的背景颜色，当我点击某个div时 – Chris

它适用于您提供的演示，但不是当我将其加载到我的浏览器时，我更新了上面的代码提供的评论，你看到的任何内容都是关闭的？ – Chris

根据萤火虫这是您的错误 - ** ReferenceError：显示未定义**'onclick =“显示（'Page1'）;”'使您的脚本不工作 – Olrac

尝试

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

Demo

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

来源

2013-10-14 02:00:47 Oriol

它在演示中效果很好，我注意到我需要jquery才能使用此功能，有没有一种方法可以不必下载jquery？ – Chris

对于这种事情，AngularJS非常方便。

只需在您的div元素中添加一个ng-class即可。选中，然后将该类关联到您的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文件。我没有特别使用你的课程，因为我认为这样做会帮助社区多一点。

来源

2015-01-13 21:56:39 Edward

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

回答

相关问题