使用 Javascript 加载页面时激活 :focus答案

【问题标题】：Activate :focus when the page loads with Javascript使用 Javascript 加载页面时激活 :focus
【发布时间】：2016-11-17 12:59:40
【问题描述】：

我有一个显示 2 个按钮和 1 个 iframe 的页面。这 2 个按钮（按钮 A 和 B）控制 iframe 的内容。我创建了一个伪类 (.button:focus)，因此用户可以看到 iframe 中当前处于活动状态的内容。

页面以 A 开始。所以我想要的是 .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;

【问题讨论】：

标签： javascript button onload pseudo-element

【解决方案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>s 更改为 <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" >

【讨论】：

好的，有道理。但这并不会在第一次加载页面时激活伪类。
我不确定你的意思。
让我试着解释一下。这个 (i.imgur.com/vvqHSCU.jpg) 是加载时的页面，一个带有 2 个按钮的框架。这（i.imgur.com/ACyzRp4.jpg）是当您单击按钮时的样子，按钮的背景颜色会发生变化。我想要什么，因为页面从显示的内容 A 开始，伪类 (:focus) 对按钮 A 是活动的。所以用户可以看到哪个地图当前处于活动状态。希望这可以澄清。
这正是以上三个示例所达到的效果。我已将您的 CSS 添加到第一个示例中，以便您查看。
真的，使用可以切换而不是焦点的类会更有意义。一旦用户点击页面上的任意位置，焦点就会丢失。