Question

我使用bootstrap创建了一组按钮：

如图所示，我将“欧洲”按钮设置为默认活动状态。如果我单击其他按钮，活动按钮将切换，这样就可以完美地工作。但是，如果我有一个活动按钮，然后单击页面上的其他位置（而不是按钮），它也将取消激活当前按钮。在单击另一个按钮之前，如何使按钮保持活动状态？

HTML：

<!doctype html>
<html lang="en">
  <head>
    <!-- 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="index.css">

    <title>PUBG Comparison Tool</title>
  </head>
  <body>
<div class="text-center">
    <input type="text" name="search" placeholder="Search...">
    <div class="btn-group">
        <button type="button" autofocus class="btn btn-default">Europe</button>
        <button type="button" class="btn btn-default">Korea/Japan</button>
        <button type="button" class="btn btn-default">North America</button>
        <button type="button" class="btn btn-default">Oceania</button>
        <button type="button" class="btn btn-default">Kakao</button>
        <button type="button" class="btn btn-default">South-East Asia</button>
        <button type="button" class="btn btn-default">South America</button>
        <button type="button" class="btn btn-default">Asia</button>
      </div>
    <br>
    <img src="images/PUBG-lg.png" alt="PUBGLogo" width="30%" height="30%">
</div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

CSS：

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');

.btn-group {
    margin-top: 5px;
}

.btn-group button:focus {
    outline:none !important;
    box-shadow: none !important;
    background-color: lightslategray;
}

.btn-group button:active {
    background-color: lightslategray;
}

body {
    background-image: url(images/pubgbg.png);
    background-size: cover;
}

input[type=text] {
    width: 50%;
    margin-top: 20%;
    border-radius: 5px;
}

.text-center > img {
    margin-top: 50px;
}

Answer 1

在bootstrap 4中，您可以使用btn-group-toggle：

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

这应该可以解决您的问题，因为它会像复选框一样使用此按钮。

Answer 2

最简单的方法是切换课程＆＃34;活跃＆＃34; /＆＃34;点击＆＃34;或点击按钮时通过jQuery按下你喜欢的任何内容，如下所示：

import * as myGroovyFunction from 'mygroovyfunction';

然后将首选样式添加到＆＃34; active＆＃34;类：

const myGroovyFunction = require('mygroovyfunction');

保持按钮的活动状态，直到单击另一个按钮

2 个答案: