引导程序单击更改背景颜色

Question

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

<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的方法，请参考此背景色转换器 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代码是可以的。

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

 .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; } 

 <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> 

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，别无其他