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

bootstrap change background color on click

本文关键字：背景 颜色 单击 引导程序      更新时间：2023-09-26

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

<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

首先，在代码笔中没有包含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>

$('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

您可以使用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);
  });

<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，就可以了

相关文章：