當頁面使用Javascript加載時激活：focus

Question

我有一個頁面，其中顯示2個按鈕和1個iframe。 這兩個按鈕（按鈕A和B）控制iframe的內容。 我做了一個偽類（.button：focus），以便用戶可以看到iframe中當前處於活動狀態的內容。

該頁面以A active開頭。 所以我想要的是當用戶加載頁面時.button：focus對於按鈕A處於活動狀態。 這樣一來，就可以清楚地了解iframe中當前處於活動狀態的內容。 我已經考慮過在身體上使用onload函數，但是無法設置適當的函數。

HTML：

<body>

<div id="load">
<a class="button" href="Test_Hoover_A.html" target="Targetframe">Schets A</a>
</div>
<a class="button" href="Test_Hoover_B.html" target="Targetframe">Schets B</a> 
<br>
<br>
<br>
<iframe src="Test_Hoover_A.html" name = "Targetframe" height=700 width=900 style="border:2px solid green;" ></iframe>

</body>

CSS：

.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
-webkit-transition-duration: 0.4s;
}


.button:focus {
background-color: #3e8e41;
}

.button:hover {
background-color: #555555;
color: white;

Answer 1

給您的元素一個ID，以便您可以輕松地選擇它們（或至少選擇要聚焦的<a> ）。

 document.getElementById('btnA').focus();

 .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; float: left; -webkit-transition-duration: 0.4s; } .button:focus { background-color: #3e8e41; } .button:hover { background-color: #555555; color: white; }

 <a id="btnA" class="button" href="Test_Hoover_A.html" target="Targetframe">Schets A</a> <a id="btnB" class="button" href="Test_Hoover_B.html" target="Targetframe">Schets B</a>

或者，如果由於任何原因而無法編輯html，則可以通過href屬性進行選擇：

 document.querySelectorAll("a[href='Test_Hoover_A.html']")[0].focus();

 <a id="btnA" class="button" href="Test_Hoover_A.html" target="Targetframe">Schets A</a> <a id="btnB" class="button" href="Test_Hoover_B.html" target="Targetframe">Schets B</a>

您可以在沒有Javascript的情況下執行此操作，但必須將<a>更改為<input type="button"> 。 這將允許您使用autofocus屬性：

 <input type="button" class="button" href="Test_Hoover_A.html" target="Targetframe" value="Schets A" autofocus> <input type="button" class="button" href="Test_Hoover_B.html" target="Targetframe" value="Schets B" >

當頁面使用Javascript加載時激活：focus

問題描述

1 個解決方案

解決方案1
1 已采納 2016-11-17 13:03:28

當頁面使用Javascript加載時激活：focus

問題描述

1 個解決方案

解決方案1 1 已采納 2016-11-17 13:03:28

解決方案1
1 已采納 2016-11-17 13:03:28