javascript - 选择时将箭头移动到每个菜单

Question

我有一个包含三个元素的列表，例如

<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>

我想要的是当我选择列表中的任何元素时，箭头将位于菜单下方。箭头 div 是 down_blue_arr

这是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;}

伙计们，如何在 Jquery 中做到这一点？？

Answer 1

这是更新的 fiddle . 我向其中添加了以下 JS 代码 -

$(document).ready(function () {
    $("#tab_sel35116 li a").on("click", moveArrow);
});

function moveArrow() {
    var pos = $(this).position().left;
    $("#down_blue_arr").css("left", pos + "px");
}

也更新了一些 CSS。