我有几个按钮样式为选项菜单的选项卡.一切看起来像我想要的,它的工作正常.我唯一的问题是活动按钮上的蓝色突出显示.我该如何删除它？
由于我不明白的原因,我的代码片段不能重现问题.
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>
解决方法
只需添加大纲：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>
