在頁面加載時使鏈接處於活動狀態，並使其保持活動狀態，直到單擊另一個指定的按鈕為止

Question

我想在頁面加載時使一個鏈接處於活動狀態，並使其保持活動狀態，直到按下某些指定的按鈕為止。 例如，我有兩個按鈕A和B，那么當頁面加載時，按鈕A將保持活動狀態，直到單擊按鈕B才保持活動狀態。 （或者，我希望在用戶第一次加載頁面時在其中一個按鈕中獲得.focus樣式。ps我在Accordin中使用了兩個按鈕。

這是html文件。

<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>

和樣式文件是

.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

您可以使用jQuery事件處理程序來完成此操作。 默認情況下，這兩個按鈕在頁面加載時均處於活動狀態。

您可以在按鈕上添加ID，以便更輕松地注冊onclick處理程序。

例如：

<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>