javascript - How to focus on a list element using the tab function and jQuery -

i working on questionnaire client. want active question on focus @ 100% opacity while other inactive questions @ 20% opacity. have page load, questions dim 20% opacity , first question @ 100%. when done question , tab next question, active list element stays @ 20% opacity until click list element and/or input field. how make field or list element active , 100% opacity. here have far:

<ul>  <li class="main" id="first-element" role="tab" data-toggle="tab">     <div class="question">this first question</div>     <input type="text" placeholder="first answer"> </li>  <li class="main" role="tab" data-toggle="tab">     <div class="question">second question</div>     <input type="text" placeholder="second answer"> </li>  <li class="main" role="tab" data-toggle="tab">     <div class="question">third question</div>     <input type="text" placeholder="third answer"> </li>  </ul>  <script>  $(document).ready(function() {     $('li.main').fadeto(1000, 0.2);     $('li#first-element').fadeto(1000, 1.0); });  $('li.main').click(function() {     // make list elements (except this) transparent     $('li.main').not(this).stop().animate({         opacity: 0.2     });     // make opaque     $(this).stop().animate({         opacity: 1.0     }); });  </script> 

here working solution on jsfiddle help: https://jsfiddle.net/urfwap4n/

i use keyup issue, maybe you:

var hideshow = function(obj){     $('li.main').not(obj).stop().animate({         opacity: 0.2     });     // make opaque     $(obj).stop().animate({         opacity: 1.0     }); }  $('li.main').click(function() {     hideshow(this); });  $('li.main').on('keyup',function(e){     var code = e.keycode || e.which;     if(code == 9) { //enter keycode         hideshow(this);     }  }); 

fiddle