在页面加载时使链接处于活动状态，并使其保持活动状态，直到单击另一个指定的按钮为止

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>