アクティブ：JavaScriptがページをロードするときのフォーカス

2つのボタンと1つのiframeを表示するページがあります。これら2つのボタン（ボタンAおよびB）は、iframeの内容を制御します。私は擬似クラス（.button：focus）を作ったので、ユーザーはiframe内でどのコンテンツが現在アクティブかを見ることができます。アクティブ：JavaScriptがページをロードするときのフォーカス

ページは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.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>

：

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を編集することができない場合Javascriptを使わずに、あなたはを変更する必要があります3210sから<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で表示されているので、擬似クラス（：focus）がボタンAに対してアクティブであるので、ユーザーはどのマップが現在アクティブであるかを見ることができます。これが明確になることを願っています。 – Lout

アクティブ：JavaScriptがページをロードするときのフォーカス

答えて

関連する問題