Function with css code for active button

Hi…

I don’t know if my idea is possible and if how can I do that.

I have functions for button onclick.

I have 3 buttons and I want to change the color of my button if it is active

here is my code


<script type="text/javascript">
//=========display parameter settings==========//
function display_PS(){
    document.loading_kanban.action="ParameterSettings.php";
    document.loading_kanban.submit();
}
//=======display kanban=========//
function display_Kanban(){
    document.loading_kanban.action="kanban_report.php";
    document.loading_kanban.submit();
}
//=========display SR==========//
function display_SR){
    document.loading_kanban.action="StockRequisition.php";
    document.loading_kanban.submit();
}
</script>
<div id="main_button">
<input type="button" name="parameter_settings" value="Parameter Settings" onclick="display_PS()">
<input type="button" name="parameter_settings" value="Stock Requisition" onclick="display_SR()">
<input type="button" name="parameter_settings" value="Kanban Report" onclick="display_Kanban()">
</div>

Is it possible to add code in my function for css active button…If no what should I do to change the color of my button for the client to know what page she is.

Thank you

Here’s how: ID Your Body For Greater CSS Control and Specificity
With a video tutorial too: Current Nav Highlighting: Using PHP to Set the Body ID

I tried this code:


<script type="text/javascript">
function resetButtonColor() {
    var info=document.getElementById('main_button').getElementsByTagName('input');
    for (var i=0; i<info.length; i++) { info[i].style.backgroundColor = 'white'; }
}
//=========display parameter settings==========//
function display_PS(pick){
    resetButtonColor();
    pick.style.backgroundColor = 'lime';
    document.loading_kanban.action="ParameterSettings.php";
    document.loading_kanban.submit();
}
//=======display kanban=========//
function display_Kanban(pick){
    resetButtonColor();
    pick.style.backgroundColor = 'lime';
    document.loading_kanban.action="kanban_report.php";
    document.loading_kanban.submit();
}
//=========display SR==========//
function display_SR(pick){
    resetButtonColor();
    pick.style.backgroundColor = 'lime';
    document.loading_kanban.action="StockRequisition.php";
    document.loading_kanban.submit();
}
</script>
<div id="main_button">
<input type="button" name="parameter_settings" value="Parameter Settings" onclick="display_PS(this)">
<input type="button" name="parameter_settings" value="Stock Requisition" onclick="display_SR(this)">
<input type="button" name="parameter_settings" value="Kanban Report" onclick="display_Kanban(this)">
</div>

and the result is when I click the button the lime color diplay but it disappear… I want to stay the color because it is active.

Thank you

Go back to the article on how to ID Your Body For Greater CSS Control and Specificity and study it more closely. Significant parts of that article it seems you have not noticed yet, and applied to what you are doing.