我有一个显示2个按钮和1个iframe的页面。这两个按钮(按钮A和B)控制iframe的内容。我已经创建了一个伪类(.button:focus),因此用户可以看到iframe中当前处于活动状态的内容。
页面以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;
答案 0 :(得分:1)
为您的元素添加一个ID,以便您可以轻松选择它们(或者至少是您想要关注的<a>
)。
document.getElementById('btnA').focus();
&#13;
.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;
}
&#13;
<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>
&#13;
或者,如果您因为任何原因无法编辑html,可以通过href属性选择:
document.querySelectorAll("a[href='Test_Hoover_A.html']")[0].focus();
&#13;
<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>
&#13;
您可以在没有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" >
&#13;