Heim  >  Fragen und Antworten  >  Hauptteil

Schreiben Sie den Titel um: Konzentrieren Sie sich auf die Funktion der Konsolentasten und nicht auf andere Bereiche

<p>Ich habe 4 Schaltflächen und wenn darauf geklickt wird, versuche ich, den Fokus auf sie zu legen, damit der Benutzer die aktuell aktive Schaltfläche sehen kann. </p> <p>Aus irgendeinem Grund funktioniert es in der Konsole wie erwartet: Wenn auf eine Schaltfläche geklickt wird, wird der Fokus hinzugefügt, die Hintergrundfarbe wird basierend auf CSS geändert. Wenn dann auf eine andere Schaltfläche geklickt wird, verliert die erste Schaltfläche den Fokus und die neue Schaltfläche erhält den Fokus. </p> <p>Es funktioniert nicht, wenn ich die Konsole nicht geöffnet habe. </p> <p> <pre class="brush:js;toolbar:false;">const oneYear = document.getElementById('1Year'); const fiveYear = document.getElementById('5Year'); const tenYear = document.getElementById('10Year'); const twentyYear = document.getElementById('20Year'); Funktion changeDate(date) { if (Datum === 1) { oneYear.className += "aktiv"; setTimeout(oneYear.focus(), 1); } if (Datum === 5) { fiveYear.focus(); fiveYear.className += "aktiv"; } if (Datum === 10) { tenYear.focus(); } if (Datum === 20) { twentyYear.focus(); } }</pre> <pre class="brush:css;toolbar:false;">.theme-dark-btn { Übergang: alle Leichtigkeit 1s; Hintergrundbild: linearer Farbverlauf (nach links, #1ACC8D, #1ACC8D, #235FCD, #1C4CA3); Hintergrundgröße: 300 %; Hintergrundposition: 0 0; Rand: 1px einfarbig #1C4CA3; Schriftstärke: 600; Buchstabenabstand: 1px; } .theme-dark-btn:hover { Hintergrundposition: 100 % 0; Rand: 1 Pixel durchgehend #1ACC8D; } .theme-dark-btn:focus { Hintergrundfarbe: #1ACC8D; } .theme-dark-btn:active { Hintergrundfarbe: #1ACC8D; } .btn { Höhe: 38px; Zeilenhöhe: 35px; Textausrichtung: Mitte; Polsterung: 0 18px; Texttransformation: Großbuchstaben; Übergang: Hintergrundbild .3s linear; Übergang: Box-Shadow .3s linear; -webkit-border-radius: 20px; -moz-border-radius: 20px; Randradius: 20px; Schriftgröße: 12px !important; } .btn:focus { Hintergrundfarbe: #1ACC8D; }</pre> <pre class="brush:html;toolbar:false;"><div class="col"> <button class="btn theme-dark-btn" type="button" style="color: white" id="1Year" onclick="changeDate(1)" Autofokus>1 Jahr</button> <button class="btn theme-dark-btn" style="color: white" id="5Year" onclick="changeDate(5)">5 Jahre</button> <button class="btn theme-dark-btn" style="color: white" id="10Year" onclick="changeDate(10)">10 Jahre</button> <button class="btn theme-dark-btn" style="color: white" id="20Year" onclick="changeDate(20)">20 Jahre</button> </div></pre> </p>
P粉315680565P粉315680565435 Tage vor457

Antworte allen(1)Ich werde antworten

  • P粉020556231

    P粉0205562312023-09-03 00:08:32

    首先,当你点击按钮时,你已经使其获得了焦点,你不需要动态地使其获得焦点。

    所以,为什么背景颜色没有改变呢?

    因为 background-image 已经覆盖了 background-color

    你只需要设置 background 而不是 background-color

    .btn:focus {
            background: #1ACC8D;
        }

    完整的示例,不需要 JS

    .theme-dark-btn {
      transition: all ease 1s;
      background-image: linear-gradient(to left, #1ACC8D, #1ACC8D, #235FCD, #1C4CA3);
      background-size: 300%;
      background-position: 0 0;
      border: 1px solid #1C4CA3;
      font-weight: 600;
      letter-spacing: 1px;
    }
    
    .theme-dark-btn:hover {
      background-position: 100% 0;
      border: 1px solid #1ACC8D;
    }
    
    .theme-dark-btn:focus {
      background-color: #1ACC8D;
    }
    
    .theme-dark-btn:active {
      background-color: #1ACC8D;
    }
    
    .btn {
      height: 38px;
      line-height: 35px;
      text-align: center;
      padding: 0 18px;
      text-transform: uppercase;
      transition: background-image .3s linear;
      transition: box-shadow .3s linear;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
      font-size: 12px !important;
    }
    
    .btn:focus {
      background: #1ACC8D;
    }
    <div class="col">
      <button class="btn theme-dark-btn" type="button" style="color: white" id="1Year" autofocus>1 Year</button>
      <button class="btn theme-dark-btn" style="color: white" id="5Year">5 Years</button>
      <button class="btn theme-dark-btn" style="color: white" id="10Year">10 Years</button>
      <button class="btn theme-dark-btn" style="color: white" id="20Year">20 Years</button>
    </div>

    Antwort
    0
  • StornierenAntwort