激活：使用JavaScript加載頁面時的焦點

我有一個顯示2個按鈕和1個iframe的頁面。這2個按鈕（按鈕A和B）控制iframe的內容。我做了一個僞類（.button：focus），以便用戶可以看到哪些內容當前在iframe中處於活動狀態。激活：使用JavaScript加載頁面時的焦點

頁面從A開始。所以我想要的是.button：當用戶加載頁面時，按鈕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;

來源

2016-11-17 Lout

給你的元素的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>

或者，如果你無法編輯無論出於什麼原因，你可以通過href屬性選擇HTML：

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

來源

2016-11-17 13:03:28 Turnip

好吧，這是有道理的。但是，當第一次加載頁面時，這不會激活僞類。 – Lout

我不確定你的意思。 – Turnip

讓我試着解釋一下。這個（https://i.imgur.com/vvqHSCU.jpg）是它加載時的頁面，一個帶有2個按鈕的框架。這個（https://i.imgur.com/ACyzRp4.jpg）是當你點擊一個按鈕時的樣子，一個按鈕的背景顏色會改變。我想要的是，由於頁面從顯示的內容A開始，因此按鈕A的僞類（：focus）處於活動狀態。因此用戶可以看到哪個地圖當前處於活動狀態。希望澄清。 – Lout

激活：使用JavaScript加載頁面時的焦點

回答

相關問題