so33224475

by Stephen

HTML

<div>
    <button type="button" class="zone" name="z1">Zone 1</button>
    <button type="button" class="zone" name="z2">Zone 2</button>
    <button type="button" class="zone" name="z3">Zone 3</button>
</div>

CSS

button.zone {
    font-weight: bold;
}
button.zone:hover {
    background-color: #f69c55;
}
button:active, button.active-btn {
    background-color: #3DAE48;
}
/*button:focus {
    background-color: #3DAE48;
}*/

JavaScript

/*
This code would be in a file like "somestuff.js"
and it would be linked into the <head> of your
document like:
    <script src="/path/to/somestuff.js">
*/
$(document).ready(function () {
    $('button.zone[name^="z"]').click(function(e) {
        $('button.zone').removeClass('active-btn');
        $(this).addClass('active-btn');
        var name = $(this).prop('name');
        var num = name.replace(/^[a-z]+/, '');
        var targetphp = 'zone' + num + 'PS.php';
    //  $("#table_area_dripPSZ1").load(targetphp);
        console.log( '$("#table_area_dripPSZ1").load(' + targetphp + ');' );
    });
});