移除活动按钮的高亮显示

Question

我有几个按钮被样式化为选项菜单的标签。一切看起来都很好，而且它也正常工作。唯一的问题是活动按钮上的蓝色高亮显示。我该如何删除它？

由于我不理解的原因，我的代码片段没有复现出问题。

function ShowCurrent()
{
 document.getElementById('btnCurrent').className = "menu";
 document.getElementById('btnFuture').className = "menu off";
}

function ShowFuture()
{
 document.getElementById('btnFuture').className = "menu";
 document.getElementById('btnCurrent').className = "menu off";
}

.menu
{
 border: 2px solid grey;
 border-bottom: none;
 margin-bottom: -2px;
 margin-right: 5px;
 padding: 3px 2px;
 position: relative;
 z-index: 5;
}

.off
{
 border-bottom: 2px solid grey;
 padding: 2px;
}

.placeholder
{
    border: 2px solid grey;
}

<div>
 <button id="btnCurrent" class="menu" onClick="ShowCurrent();">Current</button>
 <button id="btnFuture" class="menu off" onClick="ShowFuture();">Future</button>
</div>

<div class="placeholder">Just hanging out, taking up space</div>

- Lance

---

https://dev59.com/4mXWa4cB1Zd3GeqPQc2u - Stickers

好的，我明白了。当选择按钮时，在JavaScript中添加.blur()可以清除蓝色高亮显示。 - Lance

好的，我可以将它建议为那篇帖子的重复。 - Stickers

我同意问题是相同的，但解决方案是不同的。也许我应该在那里发布我的答案？ - Lance

不，等一下。那个问题是关于样式化A标签，而不是按钮。 - Lance

Answer 1

只需添加outline:0

。

function ShowCurrent() {
  document.getElementById('btnCurrent').className = "menu";
  document.getElementById('btnFuture').className = "menu off";
}

function ShowFuture() {
  document.getElementById('btnFuture').className = "menu";
  document.getElementById('btnCurrent').className = "menu off";
}

button.menu {
  border: 2px solid grey;
  border-bottom: none;
  margin-bottom: -2px;
  margin-right: 5px;
  padding: 3px 2px;
  position: relative;
  z-index: 5;
  outline: 0;
}
button.off {
  border-bottom: 2px solid grey;
  padding: 2px;
}
.placeholder {
  border: 2px solid grey;
}

<div>
  <button id="btnCurrent" class="menu" onClick="ShowCurrent();">Current</button>
  <button id="btnFuture" class="menu off" onClick="ShowFuture();">Future</button>
</div>

<div class="placeholder">Just hanging out, taking up space</div>

- Akshay

---

@Lance 你能在其他浏览器上试一下吗？ - Akshay

好的，我在IE11中打开了页面，问题根本不存在。因此，显然这只是早期浏览器中的问题。 - Lance

@Lance caniuse 上没有关于 IE7 的轮廓线的信息，所以我不确定。 - Akshay

@Lance 你应该将它添加到 button.menu:focus 中。 - LarsW

没有成功。所以明确一点，它在 HOVER 或 ACTIVE 时没有轮廓线。只有在你离开按钮后，它才会显示在最后点击的按钮上。我尝试将 outline:0; 添加到 :visited 中，但也没有起作用。 - Lance

Answer 2

添加

outline:0;

在 CSS 中

function ShowCurrent()
{
 document.getElementById('btnCurrent').className = "menu";
 document.getElementById('btnFuture').className = "menu off";
}

function ShowFuture()
{
 document.getElementById('btnFuture').className = "menu";
 document.getElementById('btnCurrent').className = "menu off";
}

.menu
{
 border: 2px solid grey;
 border-bottom: none;
 margin-bottom: -2px;
 margin-right: 5px;
 padding: 3px 2px;
 position: relative;
 z-index: 5;
    outline:0;
}

.off
{
 border-bottom: 2px solid grey;
 padding: 2px;
}

.placeholder
{
    border: 2px solid grey;
}

<div>
 <button id="btnCurrent" class="menu" onClick="ShowCurrent();">Current</button>
 <button id="btnFuture" class="menu off" onClick="ShowFuture();">Future</button>
</div>

<div class="placeholder">Just hanging out, taking up space</div>

- xTrimy

Answer 3

感谢大家的建议。

由于我正在开发一个Windows桌面小工具，所以我使用的是IE7引擎，它不支持CSS的outline属性。由于这些是按钮，一旦被点击就完成了它们的工作，因此它们不需要保持焦点。我发现添加以下代码可以解决问题：

document.getElementById(theButton).blur();

当选择按钮时，将文本传递给JavaScript以清除蓝色高亮显示。

使用jQuery解决A标签的类似问题，请参考：IE7 outline:0 not working。

- Lance

---

请不要这样做。使用CSS选项代替。你正在失去焦点。所以当用户点击它时，你立即移除了焦点。这不是你想要的。请改用CSS。 - Bram Vanroy

实际上，@BramVanroy，这正是我想要的。在这种情况下，没有CSS选项可用。当你不完全理解问题和解决方案时，我不欣赏你的投票。我是发布问题的人，在尝试了所有其他建议之后，这是有效的解决方案。您需要了解这些是按钮。一旦单击，它们就完成了它们的工作。它们没有必要保持焦点。 - Lance

尽管我仍然不同意，但你说得对，我不应该将其投下反对票。但是，由于已经过去一个小时，我无法取消反对票。因此，我给你的问题点了个赞。在我看来，CSS方法总是比任何JS解决方案更好。但如果这符合您的需求，请使用它。 - Bram Vanroy

@Lance 我认为最好还是把 https://dev59.com/4mXWa4cB1Zd3GeqPQc2u#11362571 的链接也加入到回答中。虽然标签不同但是思路相同。 - Stickers

@Pangloss 完成了！谢谢。 - Lance