javascript - Move arrow to each menu when its selected -

i have list of 3 items like

<ul id="tab_sel35116">  <li><a href="#description35116" class="job_content" data-id="35116">description</a></li>   <li><a href="#msg_body35116" class="job_content select_tab" data-id="35116">messages</a></li>  <li><a class="job_content" data-id="35116">applicants</a></li>  <div id="down_blue_arr"><span class="about_down_arrow" style="left: 20px;"></span><span class="about_down_arrow1" style="left: 20px;"></span></div> </ul> 

in want when select item of list arrow under menu. arrow div down_blue_arr

here css

.about_down_arrow{position:absolute;border-color: #4793d8 transparent transparent transparent; border-width:9px;border-style:solid;width:0;height:0;float:right;top:25px;left:20px;} .about_down_arrow1{position:absolute;border-color: #f7f7f7 transparent transparent transparent ; border-width:9px;border-style:solid;width:0;height:0;float:right;top:23px;left:20px;} 

how in jquery idea guys ??

here updated fiddle. i've added following js code -

$(document).ready(function () {     $("#tab_sel35116 li a").on("click", movearrow); });  function movearrow() {     var pos = $(this).position().left;     $("#down_blue_arr").css("left", pos + "px"); } 

and updated bit of css too.