Question

我创建了2个Bootstrap组按钮，因为出于我项目的目的，大按钮比通常的广播表单更好地工作。但是，由于某些原因，:checked或:focus效果未在此处触发。

添加btn-secondary:focus{background-color:#8D69AD;}不会产生与其他所有类似问题相同的建议。也许问题是我有input type="radio"并且按钮类实际上在标签中？

此处的Codepen：https://codepen.io/anzuj/pen/GazoJm?editors=1111

这里也提取了两个按钮组的HTML：


  <p>Select your year:</p>
  <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary rounded">
      <input type="radio" name="year" id="junior" value="junior"> Junior
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="year" id="sophomore" value="sophomore"> Sophomore
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="year" id="senior" value="senior"> Senior
    </label>
  </div>


  <p>Select your path:</p>
  <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary btn-rounded">
      <input type="radio" name="path" id="artificer" value="artificer"> Artificer
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="healer" value="healer"> Healer
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="crypto" value="crypto"> Cryptozoologist
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="guardian" value="guardian"> Guardian
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="cursebreaker" value="cursebreaker"> Curse Breaker
    </label>
  </div>

  <span id="classResult"> </span>

有什么想法我想念的吗？

Answer 1

使用按钮作为复选框是Bootstrap的一项功能，要求其JavaScript库能够按预期工作。在CSS中无法正确执行此操作，因为它可能需要父选择器或：has选择器，因为DOM的checked属性仅可从CSS上的输入元素本身获得，而不能在其父元素（按钮）上获得。对于您的应用程序，一个简单的修复方法是添加Bootstrap JavaScript库：

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Popper.js不需要。您还可以按照Bootstrap主页的建议使用苗条的jQuery构建。

//function to display timetable according to user choices in year/path
//currently only Junior choices
$(document).ready(function () {
    $('input[type="radio"]').on("change", function () {
        //making chosen radio options to variables
        var $year = $('input[name="year"]:checked');
        var $path = $('input[name="path"]:checked');
        //logic
        if ($year.val() == "junior" && $path.val() == "artificer") {
            $("#classResult").html("Junior artificer timetable!");
        } else if ($year.val() == "junior" && $path.val() == "cursebreaker") {
            $("#classResult").html("Junior cursebreaker timetable!");
        } else if ($year.val() == "junior" && $path.val() == "crypto") {
            $("#classResult").html("Junior crypto timetable!");
        } else if ($year.val() == "junior" && $path.val() == "healer") {
            $("#classResult").html("Junior healer timetable!");
        } else if ($year.val() == "junior" && $path.val() == "guardian") {
            $("#classResult").html("Junior guardian timetable!");
        } 
    });
});

btn-secondary:focus{
  background-color:#8D69AD;
}

<!-- Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!--jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" 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>


<div class="container">
  <br>

  <p>Select your year:</p>
  <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary rounded">
      <input type="radio" name="year" id="junior" value="junior"> Junior
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="year" id="sophomore" value="sophomore"> Sophomore
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="year" id="senior" value="senior"> Senior
    </label>
  </div>

  <br><br>
  <p>Select your path:</p>
  <div class="btn-group-vertical btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary btn-rounded">
      <input type="radio" name="path" id="artificer" value="artificer"> Artificer
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="healer" value="healer"> Healer
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="crypto" value="crypto"> Cryptozoologist
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="guardian" value="guardian"> Guardian
    </label>
    <label class="btn btn-secondary rounded mt-1">
      <input type="radio" name="path" id="cursebreaker" value="cursebreaker"> Curse Breaker
    </label>
  </div>
  <br>
  <br>

  <span id="classResult"> </span>

</div>

：焦点效果未显示在引导单选按钮组上

1 个答案: