如何让按钮在点击屏幕后保持突出显示？

我在模式窗口中添加了两个按钮，其中一个按钮突出显示，但是当我要点击屏幕时，它会转为正常。如何让它保持突出显示。我使用下面的代码：如何让按钮在点击屏幕后保持突出显示？

<button type="button" class="btn btn-default">New</button> 
<button type="button" class="btn btn-default">Used</button> 
<button type="button" class="btn btn-default" autofocus>Any</button>

来源

2016-07-13 kapiljain123

也许使用：active和：重点伪类为您的按钮，并更改为你想要的背景颜色。 –

可以给我的CSS示例 – kapiljain123

请参阅下面希腊先生发布的内容。这就是我所指的。 –

HTML：

<button id="highlight" ..... ></button>

CSS：

#highlight, #highlight:hover, #highlight:active, #highlight:focus { 
    color://any-color; 
    // more css 
}

注：这是使用伪类悬停，重点和活跃，当bu上的任何事件发生时保持按钮的样式不变tton发生。

来源

2016-07-13 16:13:42

是的，但要保持不变，当我点击屏幕的其余部分。 – kapiljain123

是的，因为第一个选择器#highlight，但请记住，这个按钮只有一种风格，不管怎样都不会改变风格。 –

但我不想在点击屏幕后改变它。我怎么做，只有当我选择任何其他按钮时，它才会改变。 – kapiljain123

首先设置模态内的自动对焦将不会始终工作。你应该通过javascript设置焦点按钮。请参阅http://getbootstrap.com/javascript/#modals。 $('#myModal').on('shown.bs.modal', function() { $('#button3').focus() })

:focus和:active是伪类，允许我们根据元素的状态定义特定的CSS规则。在引导程序.active和.focus类中具有与:focus和:active相同的CSS样式。因此，将.active或.focus添加到您要始终突出显示的按钮。

<button type="button" class="btn btn-default active">Any</button>

来源

2016-07-13 16:55:49 anu

我不想让按钮始终突出显示，我只是想让它直到我没有选择下一个按钮，但每当我点击屏幕上的任何效果即将消失。 – kapiljain123

在这种情况下，您应该捕获按钮上的单击事件，并在单击其他按钮时移除“活动”类。（'click'，function（e）{$（“button”）。removeClass（'active'）; $（this）.addClass（'active'）;}） – anu

尝试

var yourbuttons = document.getElementsByClassName('highlight-hover'); 
for (var i = yourbuttons.length - 1; i >= 0; i--) { 
    var currentbtn; 
    yourbuttons[i].onclick=function(){ 
     if(currentbtn){ 
      currentbtn.classList.remove("highlight"); 
      } 
      this.classList.add("highlight"); 
      currentbtn=this; 
    } 
};

，如果你想，当你点击屏幕的另一部分的按钮保持高亮显示有不是一个真正的CSS唯一方法。：主动或：集中删除自己的风格，当元素不再主动或焦点

下面是什么，似乎你想，因为我在工作https://jsfiddle.net/mksty8eq/

无聊当你点击一个按钮，一个工作版本它保持突出显示直到另一个按钮被点击

来源

2016-07-13 18:16:43

所以你想要JSFiddle？

CSS

.active { 
    color: #F00; 
}

$('button').on('click', function() { 
    $('button').removeClass('active'); 
    $(this).addClass('active'); 
}

来源

2016-07-13 19:06:16 KRONWALLED

如何让按钮在点击屏幕后保持突出显示？

回答

相关问题