как сохранить отображаемую границу кнопки и после щелчка по другой области она исчезнет - PullRequest
Новая
       2

как сохранить отображаемую границу кнопки и после щелчка по другой области она исчезнет

0 голосов
/ 17 июня 2020

Точно так же, как в документации, но это a-тег, который должен использовать атрибут href. У меня есть два вопроса: 1. для псевдокласса a-tag, который служит кнопкой, как мне предотвратить его переход на блок #. 2. Если я использую класс кнопки, после первого щелчка по нему в первый раз, как сохранить его в состоянии фокуса, а затем после второго щелчка, он go вернется в исходное состояние ... 

.btn,.btn-primary{
    width: 110px;
    font-size: 0.9em;
    color: black !important;
    background-color: white !important;
}

.btn,.btn-primary:active,.btn,.btn-primary:focus{
    font-weight: bold;
    background-color:white;
    color:black;
    border-color:#4477b1 !important;
    border-width: 2px !important;
}

это мой html: 

<button type="button" class="btn btn-primary ml-4 active" data-toggle="button" aria-pressed="true" (click)=display()>{{buttonContent}}</button>

это изображение отображается после первого щелчка после первого щелчка

1 Ответ

0 голосов
/ 17 июня 2020

Насколько я понимаю из вашего вопроса, вы не хотите, чтобы кнопка была выделена все время (потому что вы делаете это, просто добавляя рамку) .... но вместо этого вы хотите, чтобы она была выделена как что после начального щелчка и не будет отключено, если вы нажмете в другом месте, кроме на самой кнопке. Если я неправильно понял, дайте мне знать, и я буду редактировать по мере необходимости.

Демо: https://jsfiddle.net/ebtk1oqg/

Код: 

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
      .btn,.btn-primary{
        width: 110px;
        font-size: 0.9em;
        color: black !important;
        background-color: white !important;
      }

      .btn-primary:focus {
        box-shadow: none;
      }


      #btn-primary.focus {
        box-shadow: none;
      }


      .is-active {
          box-shadow: 0 0 0 .2rem rgba(38,143,255,.5) !important;
      }


  </style>
  </head>
  <body>
    <button id="yourButton" type="button" class="btn btn-primary ml-4 active" data-toggle="button" aria-pressed="true" (click)=display()>buttonContent</button>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script>
        $('#yourButton').click(function(){
            $(this).removeClass("focus active");
            $(this).toggleClass("is-active active");
        });
    </script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...