Knopf der unteren Grenze verschwindet, wenn ich irgendwo anders auf dem Bildschirm klicken

Question

fiddle

Das ist mein HTML-Code ist:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
<button> 
    <i class="fa fa-5x fa-motorcycle gobumpr_icon"></i> 
</button> 
<button> 
    <i class="fa fa-car fa-5x gobumpr_icon"></i> 
</button> 

Das ist mein CSS ist:

button:focus { 
    border-bottom: thick solid #FFA800; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
    transition: width 2s; 
    -webkit-transition: width 2s; 
    outline: none; 
    box-shadow: none; 
} 

Ich möchte, dass die Grenz Boden zu bleiben, bis der andere Knopf geklickt wird. Wie kann ich das tun?

Answer 1

:focus wird nicht helfen, weil Grenze wird zu entfernen, wenn Sie außerhalb klicken wird. Dazu müssen Sie eine Klasse unter click der Schaltfläche hinzufügen, die beibehalten wird, sofern nicht auf eine andere Schaltfläche auf derselben Seite geklickt wird.

$(function() { 
 
    var buttons = $('.button'); 
 
    
 
    buttons.click(function(e) { 
 
    e.preventDefault(); 
 

 
    buttons.removeClass('focus'); 
 
    $(this).addClass('focus'); 
 
    }); 
 
});

.button.focus { 
 
    border-bottom:thick solid #FFA800; 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
    transition: width 2s; 
 
    -webkit-transition: width 2s; 
 
    outline:none; 
 
    box-shadow:none;  
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 

 
<button class="button"><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></button> 
 

 
<button class="button"><i class="fa fa-car fa-5x gobumpr_icon"></i></button>

Answer 2

Wenn Sie css auf button:focus anwenden, bedeutet das, dass bis zum Zeitpunkt, an dem die Schaltfläche aktiviert ist, die CSS angewendet wird, aber wenn Sie irgendwo auf den Bildschirm klicken, verschwindet der Fokus.

Hinzufügen .active Klasse auf Schaltfläche geklickt und CSS darauf anwenden.

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

button.active { 
    border-bottom:thick solid #FFA800; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
    transition: width 2s; 
    -webkit-transition: width 2s; 
    outline:none; 
    box-shadow:none;  
} 

Answer 3

Um dies zu erreichen, können Sie eine Klasse auf die Schaltfläche setzen, auf die Sie klicken, während Sie die Klasse von einer anderen Schaltfläche entfernen. Versuchen Sie folgendes:

$('button').click(function() { 
 
    $('button').not(this).removeClass('active'); 
 
    $(this).toggleClass('active'); 
 
})

button.active { 
 
    border-bottom: thick solid #FFA800; 
 
    border-bottom-left-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
    transition: width 2s; 
 
    -webkit-transition: width 2s; 
 
    outline: none; 
 
    box-shadow: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<button><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></button> 
 
<button><i class="fa fa-car fa-5x gobumpr_icon"></i></button>

Answer 4

Dies geschieht, weil die CSS Sie werden keine Auswirkungen angewendet, wenn das Element den Fokus verliert. Das passiert, wenn Sie woanders klicken.

Lösen Sie das Problem, indem Sie eine andere Klasse hinzufügen und entfernen.

Wenn Sie auf die Schaltfläche klicken, fügen Sie dem Element eine andere Klasse hinzu.

.borderBottom 
{ 
    border-bottom:thick solid #FFA800; 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
    transition: width 2s; 
    -webkit-transition: width 2s; 
    outline:none; 
    box-shadow:none;  
} 

Wenn Sie auf einen anderen klicken, entfernen Sie die Klasse, in der sie bereits vorhanden ist.

Siehe add class von Javascript.

Answer 5

Sie können dies auch ganz ohne Javascript tun:

input:checked + i{ 
 
\t border-bottom:thick solid #FFA800; 
 
\t border-bottom-left-radius: 5px; 
 
\t border-bottom-right-radius: 5px; 
 
\t transition: width 2s; 
 
    -webkit-transition: width 2s; 
 
\t outline:none; 
 
\t box-shadow:none; 
 
} 
 

 
input{ 
 
    display:none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 

 
<label><input type="radio" name="test"><i class="fa fa-5x fa-motorcycle gobumpr_icon"></i></label> 
 

 
<label><input type="radio"name="test"><i class="fa fa-car fa-5x gobumpr_icon"></i></label>