There is a table of div tags.

How to change the background of only one line when clicking on a line?

 .rels-right-block{display:block;} .valfirst{height:20px; width:20px; text-align:center; float:left;} .valexp_numb{height:20px; width:150px; text-align:center; padding:1px 0; float:left;} .valexp_numb .exp1{height:20px; width:50px; float:left;} .valexp_numb .exp2{height:20px; width:50px; float:right;} .exp_numb{height:29px; padding:3px 0; float:left;} .point_dest{height:29px; padding:3px 0; float:left;} .valpoint_dest{height:20px; width:200px; text-align:left; text-transform:uppercase; border:1px solid #666666; padding:2px 0 0 6px;} 
 <div class="rels-right-block"> <div class="vals"> <div class="listRel"> <div class="valfirst">-</div> <div class="valexp_numb"><div class='exp1'>1</div>-<div class='exp2'>2</div></div> <div class="valpoint_dest">3er</div> </div> <div class="listRel"> <div class="valfirst">-</div> <div class="valexp_numb"><div class='exp1'>66</div>-<div class='exp2'>34</div></div> <div class="valpoint_dest">ert</div> </div> <div class="listRel"> <div class="valfirst">-</div> <div class="valexp_numb"><div class='exp1'>113</div>-<div class='exp2'>gg</div></div> <div class="valpoint_dest">12</div> </div> <div class="listRel"> <div class="valfirst">-</div> <div class="valexp_numb"><div class='exp1'>hik</div>-<div class='exp2'>www</div></div> <div class="valpoint_dest">123</div> </div> </div> </div>

  • when clicking on what? - MasterAlex
  • @MasterAlex when clicking on a line - Xfirab
  • Does anyone have any options - Xfirab
  • @Xfirab, I'll write now - Yuri
  • 2
    jsfiddle.net/ghmy23w8 - soledar10

3 answers 3

 $(function() { $('.listRel').click(function() { $('.listRel').removeClass('color'); $(this).addClass('color'); }); }); 
 .rels-right-block{display:block;} .valfirst{height:20px; width:20px; text-align:center; float:left;} .valexp_numb{height:20px; width:150px; text-align:center; padding:1px 0; float:left;} .valexp_numb .exp1{height:20px; width:50px; float:left;} .valexp_numb .exp2{height:20px; width:50px; float:right;} .exp_numb{height:29px; padding:3px 0; float:left;} .point_dest{height:29px; padding:3px 0; float:left;} .valpoint_dest{height:20px; width:200px; text-align:left; text-transform:uppercase; border:1px solid #666666; padding:2px 0 0 6px;} .color {background-color:red} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="rels-right-block"> <div class="vals"> <div class="listRel"> <div class="valfirst">-</div> <div class="valexp_numb"><div class='exp1'>1</div>-<div class='exp2'>2</div></div> <div class="valpoint_dest">3er</div> </div> <div class="listRel"> <div class="valfirst">-</div> <div class="valexp_numb"><div class='exp1'>66</div>-<div class='exp2'>34</div></div> <div class="valpoint_dest">ert</div> </div> <div class="listRel"> <div class="valfirst">-</div> <div class="valexp_numb"><div class='exp1'>113</div>-<div class='exp2'>gg</div></div> <div class="valpoint_dest">12</div> </div> <div class="listRel"> <div class="valfirst">-</div> <div class="valexp_numb"><div class='exp1'>hik</div>-<div class='exp2'>www</div></div> <div class="valpoint_dest">123</div> </div> </div> </div>

    Javascript option

    Feeddle

     var classSelector, classElements, startActive; classSelector = '.listRel'; classElements = document.querySelectorAll(classSelector); startActive = function() { for (var i = 0; i < classElements.length; i++) { classElements[i].classList.remove('listRel-current'); } this.classList.add('listRel-current'); }; for (var i = 0; i < classElements.length; i++) { classElements[i].addEventListener('mousedown', startActive); } 
     .rels-right-block { display: block; } .valfirst { height: 20px; width: 20px; text-align: center; float: left; } .valexp_numb { height: 20px; width: 150px; text-align: center; padding: 1px 0; float: left; } .valexp_numb .exp1 { height: 20px; width: 50px; float: left; } .valexp_numb .exp2 { height: 20px; width: 50px; float: right; } .exp_numb { height: 29px; padding: 3px 0; float: left; } .point_dest { height: 29px; padding: 3px 0; float: left; } .valpoint_dest { height: 20px; width: 210px; text-align: left; text-transform: uppercase; border: 1px solid #666666; padding: 2px 0 0 0; box-sizing: border-box; } .listRel { clear: both; max-width: 210px; } .listRel-current { background: tomato; color: #fff; } 
     <div class="rels-right-block"> <div class="vals"> <div class="listRel"> <div class="valfirst">-</div> <div class="valexp_numb"> <div class='exp1'>1</div>- <div class='exp2'>2</div> </div> <div class="valpoint_dest">3er</div> </div> <div class="listRel"> <div class="valfirst">-</div> <div class="valexp_numb"> <div class='exp1'>66</div>- <div class='exp2'>34</div> </div> <div class="valpoint_dest">ert</div> </div> <div class="listRel"> <div class="valfirst">-</div> <div class="valexp_numb"> <div class='exp1'>113</div>- <div class='exp2'>gg</div> </div> <div class="valpoint_dest">12</div> </div> <div class="listRel"> <div class="valfirst">-</div> <div class="valexp_numb"> <div class='exp1'>hik</div>- <div class='exp2'>www</div> </div> <div class="valpoint_dest">123</div> </div> </div> </div>

      Try my solution:

       (function() { var blocks = document.querySelectorAll(".block"); for(var i = 0; i < blocks.length; i++) { blocks[i].addEventListener("click", function() { for(var j = 0; j < blocks.length; j++) { blocks[j].classList.remove("active"); } this.classList.add("active"); }, false); } })(); 
       .block { width: 260px; border: 1px solid gray; margin: 5px 0px; } .block:last-child { margin: 0px; } .block div { cursor: pointer; display: inline-block; width: 70px; border-right: 1px solid gray; text-align: center; padding: 5px; } .block.active { background-color: orange; } .block div:last-child { border: none; } 
       <div class="container"> <div class="block"> <div class="name"> John </div> <div class="surname"> Sleiden </div> <div class="born"> 1985.12.12 </div> </div> <br /> <div class="block"> <div class="name"> Ben </div> <div class="surname"> Stuart </div> <div class="born"> 1976.12.12 </div> </div> </div>

      • Thanks, I'll try - Xfirab