bootstrap change background color on click

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

Сначала в вашем 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 2

$('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'); 
}) 

Кроме того, не забудьте включить JQuery в вашем codepen.io.

Answer 3

Вы можете найти с помощью JavaScript, пожалуйста, реф этот back ground color changerhttp://jsfiddle.net/p7w9W/2/

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

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 в голове, ничего другого