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

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>

Answer 1

只需添加outline:0

即可

＆＃13;

＆＃13;

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";
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

感谢大家的建议。

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

document.getElementById(theButton).blur();

选择按钮时，

到javascript会清除蓝色突出显示。

此处使用jquery解决的A标签存在类似问题：IE7 outline:0 not working

Answer 3

添加

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>