gpt4 book ai didi

javascript - 激活:focus when the page loads with Javascript

转载 作者:行者123 更新时间:2023-12-03 05:37:52 25 4
gpt4 key购买 nike

我有一个页面,其中显示 2 个按钮和 1 个 iframe。这 2 个按钮(按钮 A 和 B)控制 iframe 的内容。我创建了一个伪类 (.button:focus),以便用户可以看到 iframe 中当前处于事件状态的内容。

页面以 A active 开头。所以我想要的是当用户加载页面时 .button:focus 对于按钮 A 是事件的。这样就可以清楚地了解 iframe 中当前处于事件状态的内容。我研究过在 body 上使用 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;

最佳答案

为您的元素提供一个 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 when the page loads with Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40655605/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com