从活动按钮中删除突出显示答案

【问题标题】：Remove highlight from active button从活动按钮中删除突出显示
【发布时间】：2015-07-27 02:44:05
【问题描述】：

我有几个按钮样式为选项菜单的选项卡。一切看起来都像我想要的，并且运行良好。我唯一的问题是活动按钮上的蓝色突出显示。如何删除它？

由于我不明白的原因，我的代码 sn-p 没有重现问题。

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>

【问题讨论】：

stackoverflow.com/questions/11360979/ie7-outline0-not-working
好的，我明白了。选择按钮时将 .blur() 添加到 javascript 会清除蓝色突出显示。
太好了，我可以建议它作为那个帖子的骗子吗？
我同意问题相同，但解决方案不同。也许我也应该在那里发布我的答案？
不，等一下。这个问题是样式 A 标签，而不是按钮。

标签： html css

【解决方案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>

【讨论】：

是你添加的outline: 0;吗？在实际应用中它对我不起作用。
@Lance 是的，您确定已将其添加到 button.menu 吗？
我做到了，就像你展示的那样。如果重要，这是在 IE7 中呈现。
@Lance 你能在其他浏览器上试试吗？
好的，我用IE11打开页面，完全不存在问题。显然，这只是早期浏览器中的一个问题。

【解决方案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>

【讨论】：

【解决方案3】：

感谢大家的建议。

由于这是一个 Windows 桌面小工具，我正在开发的引擎是 IE7，它不支持 CSS 大纲属性。由于这些是按钮，一旦单击它们就完成了它们的工作，因此它们无需保持焦点。我发现添加：

document.getElementById(theButton).blur();

当按钮被选中时向 javascript 清除蓝色突出显示。

这里用 jquery 处理的 A 标签也有类似的问题：IE7 outline:0 not working

【讨论】：

请不要这样做。请改用 CSS 选项。你正在做的是失去焦点。因此，当用户单击它时，您会立即移除焦点。那不是你想要的。改用 CSS。
实际上，@BramVanroy，这正是我想要的。没有适用于这种情况的 CSS 选项。当您不完全理解问题和解决方案时，我不欣赏否决票。我是发布问题的人，在尝试了所有其他建议之后，这是可行的解决方案。您需要了解这些是按钮。一旦点击，他们就完成了他们的工作。他们没有理由需要保持专注。
尽管我仍然不同意，但你说得对，我不应该对此投反对票。但是，由于是一个小时前，我无法撤消否决票。因此，我赞成您的问题。恕我直言，CSS 方法总是比任何 JS 解决方法都要好。但是，如果这符合您的需求，那就去吧。
我同意 CSS 会更好。这是在不支持轮廓的 IE7 中呈现的，这就是 CSS 在这里不起作用的原因。使用 IE7 的原因是这实际上是来自我正在处理的 Windows 桌面小工具的代码，而小工具引擎仅是 IE7。 @BramVanroy
@BramVanroy 我已经编辑了我的答案，以便更好地解释为什么需要这样做以及它为什么起作用。请看您现在是否同意。是的，我完全同意纯 CSS 解决方案会更好。就在我找不到问题的时候，我发布了这个问题。