make link active when page loads and force it ot remain active untill another specified button is clicked

Question

I would like to make one link active when the page loads and make it remain active untill some specified button is pressed. For example I have two buttons A and B, then when Page load, BUtton A will remain active and not untill Button B is clicked it will remain active. ( alternatively, I would like to get .focus style in one of there button as user loads the page for first time. ps I am using both button inside Accordin.

Here is the html file.

<a   href="SECA.html" style="  z-index:0; color: white; "     
target="targetframe"  class="myButton" >Section A </a>


<a   href="SECB.html" style="margin-left: 1%; z-index:0 color: white; "   
target="targetframe"  class="myButton" >Section B </a>

and style file is

.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #f5978e;
-webkit-box-shadow:inset 0px 1px 0px 0px #f5978e;
box-shadow:inset 0px 1px 0px 0px #f5978e;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,  
#f24537), color-stop(1, #c62d1f));
background:-moz-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:-webkit-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:-o-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:-ms-linear-gradient(top, #f24537 5%, #c62d1f 100%);
background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', 
endColorstr='#c62d1f',GradientType=0);
background-color:#f24537;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #d02718;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:13px;
font-weight:bold;

padding: 6.5px 13px;
text-decoration:none;
text-shadow:0px 1px 0px #810e05;

}
.myButton:focus {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
 box-shadow:inset 0px 1px 0px 0px #bbdaf7;
 background:-webkit-gradient(linear, left top, left bottom, color-
 stop(0.05, #79bbff), color-stop(1, #378de5));
 background:-moz-linear-gradient(top, #79bbff 5%, #378de5 100%);
 background:-webkit-linear-gradient(top, #79bbff 5%, #378de5 100%);
 background:-o-linear-gradient(top, #79bbff 5%, #378de5 100%);
 background:-ms-linear-gradient(top, #79bbff 5%, #378de5 100%);
 background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', 
endColorstr='#378de5',GradientType=0);
background-color:#79bbff;
-moz-border-radius:6px;
-webkit-border-radius:6px;
 border-radius:6px;
border:1px solid #84bbf3;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:13px;
font-weight:bold;
padding:6.5px 13px;
text-decoration:none;
text-shadow:0px 1px 0px #528ecc;
 }

Answer 1

You could use jQuery event handlers to accomplish this. Both the buttons are active by default on page load.

You could have ids on the buttons to make it easier to register the onclick handler.

Eg :

<a id="secA" href="SECA.html" style="z-index:0; color: white;" target="targetframe"  class="myButton"> Section A </a>
<a id="secB" href="SECB.html" style="margin-left: 1%; z-index:0 color: white;" target="targetframe" class="myButton"> Section B </a>

<script>
    $(function() {
        $("#secB").on("click", function() {
            $("#secA").prop("disabled", true); //jQuery 1.6+
            //$("#secA").attr("disabled", "disabled") //jQuery 1.5 and below
        });
    });
</script>