Question

我想一次只突出显示一个按钮，所以其他按钮会在点击一个新按钮后重置为原始颜色。我需要添加什么来实现我的JavaScript？

这是repl.IT的教室我的课堂任务是：

将btn-highlight类的样式放在index.css文件中。
在index.js文件中放置一个单击默认按钮（类btn-default）的处理程序。

$(document).ready(function() {
  $(".btn-default").click(function() {
    $(this).toggleClass("btn-highlight");
  }); // Put your code here
});

body {
  padding-top: 50px;
  padding-bottom: 20px;
}


/* styles for highlighted buttons */

.btn-highlight,
.btn-highlight:focus,
.btn-highlight:hover {
  background-color: yellow;
  /* Put styles here */
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" placeholder="Email" class="form-control">
        </div>
        <div class="form-group">
          <input type="password" placeholder="Password" class="form-control">
        </div>
        <button class="btn btn-success btn-sign-in">Sign in</button>
      </form>
    </div>
    <!--/.navbar-collapse -->
  </div>
</nav>

<div class="container">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p>
        <button class="btn btn-default" href="#" role="button" data-button-number="0">
                  Button 0
                </button>
      </p>
    </div>
    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p>
        <button class="btn btn-default" href="#" role="button" data-button-number="1">
                  Button 1
                </button>
      </p>
    </div>
    <div class="col-md-4">
      <h2>Heading</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
      <p>
        <button class="btn btn-default" href="#" role="button" data-button-number="2">
                  Button 2
                </button>
      </p>
    </div>
  </div>

  <hr>

  <footer>
    <p>&copy; 2016 Company, Inc.</p>
  </footer>
</div>

Answer 1

首先，您需要使CSS更具体，以便能够应用背景。然后在jQuery代码中，您只需从所有按钮中删除该类，然后将其添加到当前按钮，这样只有一个拥有它：

$(document).ready(function() {
  $(".btn-default").click(function() {
    $(".btn-default").removeClass('btn-highlight')
    $(this).addClass("btn-highlight");
  }); // Put your code here
});

body {
  padding-top: 50px;
  padding-bottom: 20px;
}


/* styles for highlighted buttons */

.btn-default.btn-highlight,
.btn-default.btn-highlight:focus,
.btn-default.btn-highlight:hover {
  background-color: yellow;
  /* Put styles here */
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Jumbotron Template for Bootstrap</title>

  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Custom styles for this template -->
  <link href="index.css" rel="stylesheet">

</head>

<body>

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <form class="navbar-form navbar-right">
          <div class="form-group">
            <input type="text" placeholder="Email" class="form-control">
          </div>
          <div class="form-group">
            <input type="password" placeholder="Password" class="form-control">
          </div>
          <button class="btn btn-success btn-sign-in">Sign in</button>
        </form>
      </div>
      <!--/.navbar-collapse -->
    </div>
  </nav>

  <div class="container">
    <!-- Example row of columns -->
    <div class="row">
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p>
          <button class="btn btn-default" href="#" role="button" data-button-number="0">
                  Button 0
                </button>
        </p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p>
          <button class="btn btn-default" href="#" role="button" data-button-number="1">
                  Button 1
                </button>
        </p>
      </div>
      <div class="col-md-4">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p>
          <button class="btn btn-default" href="#" role="button" data-button-number="2">
                  Button 2
                </button>
        </p>
      </div>
    </div>

    <hr>

    <footer>
      <p>&copy; 2016 Company, Inc.</p>
    </footer>
  </div>
  <!-- /container -->


  <!-- Bootstrap core JavaScript
        ================================================== -->
  <!-- Placed at the end of the document so the pages load faster -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="index.js"></script>
</body>

</html>

CSS

一次只突出显示一个按钮

1 个答案: