Question

我希望在单击时更改列的背景颜色，并在单击另一列时恢复为其初始颜色。请检查codepen链接上的代码。

<div class="row">
<div class="col-sm-2 col2">Type</div>
<a href="#" class="link">
<div class="col-sm-5 col3">Close Ended</div>
</a>
<a href="#" class="link">
  <div class="col-sm-5 col4">Open Ended</div>
</a>

http://codepen.io/SantoshNeela/pen/zKYAOa

Answer 1

$('a.link').click(function(e) {
  $('a.link').each(function(i, el) {
    // Remove existing active classes
    $(el).removeClass('active');
  })
  // Set the new (clicked) class as active.
  $(e.target).addClass('active');
})

另外，不要忘记在codepen.io中包含jQuery。

Answer 2

您可以使用JavaScript找到这个back ground color changer http://jsfiddle.net/p7w9W/2/

var $p = $("#P44");
$p.stop()
  .css("background-color","yellow")
  .hide(1500, function() {
      $p.css("background-color","red")
        .show(1500);
  });

Answer 3

首先在您的codepen中，您还没有包含Jquery。包括它。

然后，如果您想要更改背景颜色，可以通过添加此代码

来实现

.active div{
  background-color:red!important;
}

jquery代码没问题。

＆＃13;

 $('a.link').click(function() {
       $('a.link').removeClass('active');
       $(this).addClass('active');
   });

＆＃13;

.active div{
  background-color:red!important;
}   
.stats-div {
     display: inline-block;
     text-align: center;
     margin-left: 20px;
   }
  
   .stats-div .row .col2 {
     background: grey;
     margin-left: -10px;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
     padding: 8px;
     font-weight: bold;
     color: white;
   }
   
   .stats-div .row .col3 {
     background: lightgrey;
     padding: 8px;
     font-weight: bold;
     color: black;
     border-right-style: ridge;
   }
   
   .stats-div .row .col4 {
     background: lightgrey;
     padding: 8px;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
     font-weight: bold;
   }
   
  
   .stats-div .row a,
   a:visited {
     background: lightgrey
   }
   
   a.link {
     background: blue;
   }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stats-div col-sm-6 col-md-6">
  <div class="row">
    <div class="col-sm-2 col2">Type</div>
    <a href="#" class="link">
      <div class="col-sm-5 col3">Close Ended</div>
    </a>
    <a href="#" class="link">
      <div class="col-sm-5 col4">Open Ended</div>
    </a>
  </div>

＆＃13;

Answer 4

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js">   </script>
 <div class="row">
<div class="col-sm-2 col2">Type</div>
<a href="#" class="link">
<div class="col-sm-5 col3">Close Ended</div>
</a>
<a href="#" class="link">
<div class="col-sm-5 col4">Open Ended</div>
</a>

只需在脑中添加jquery，别无其他

bootstrap在点击时更改背景颜色

4 个答案: