如何在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樣式

回答

相關問題