Question

我在模态窗口中添加了两个按钮，其中一个按钮突出显示但是当我要点击屏幕时它会恢复正常。如何让它保持高亮显示。我使用以下代码：

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

Answer 1

HTML：

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

CSS：

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

注意：这是使用伪类hover，focus和active，以便在按钮上发生任何事件时保持按钮的相同样式不变。

Answer 2

所以你想要JSFiddle？

CSS

.active {
    color: #F00;
}

JS

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

Answer 3

首先在模态中设置自动对焦不会始终有效。你应该通过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>

Answer 4

尝试

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的方法。：active或：当元素不再活动或焦点时，焦点移除它们的样式

这是你想要的工作版本因为我在工作中感到无聊https://jsfiddle.net/mksty8eq/

当您单击一个按钮时，它会一直保持突出显示，直到单击另一个按钮

单击屏幕后如何使按钮保持突出显示？

4 个答案: