选中后，将箭头移动到每个菜单

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。

Answer 2

首先在li中移动箭头并默认隐藏它们。然后显示带有活动类的箭头。你实际上必须像这样改变你的标记。的 Demo

<强> HTML

    <div id='tabs' class='job_min_tab' style='float:right;position:relative'>
        <ul id="tab_sel35116">
            <li class='active'><a href="#description35116" class="job_content" data-id="35116">Description</a>

    <span class="down_arrow1" style="left: 20px;"></span>

            </li>
            <li><a href="#msg_body35116" class="job_content select_tab" data-id="35116">Messages</a>

    <span class="down_arrow1" style="left: 20px;"></span>

            </li>
            <li><a class="job_content" data-id="35116">Applicants</a>

    <span class="down_arrow1" style="left: 20px;"></span>

            </li>
            <div id="down_blue_arr"></div>
        </ul>

</div>

<强> CSS

 .down_arrow {
    position:absolute;
    border-color: #4793D8 transparent transparent transparent;
    border-width:9px;
    border-style:solid;
    width:0;
    height:0;
    float:right;
    top:14px;
    left:20px; display:none;
}
.down_arrow1 {
    position:absolute;
    border-color: #f7f7f7 transparent transparent transparent;
    border-width:9px;
    border-style:solid;
    width:0;
    height:0;
    float:right;
    top:13px;
    left:20px;
    display:none;
}
li.active .down_arrow1, li.active .down_arrow  {
    display:block;
}

Answer 3

尝试这个工作小提琴：

http://jsfiddle.net/Vth5g/1/

代码：

HTML：

<ul id="tab_sel35116">
 <li id="item1" onclick="itemClicked(this)"><a href="#description35116" class="job_content" data-id="35116">Description</a></li> 
 <li id="item2" onclick="itemClicked(this)"><a href="#msg_body35116" class="job_content select_tab" data-id="35116">Messages</a></li>
 <li id="item3" onclick="itemClicked(this)"><a class="job_content" data-id="35116">Applicants</a></li>

</ul>

CSS：

.about_down_arrow{position:absolute;border-color: #4793D8 transparent transparent transparent; border-width:9px;border-style:solid;width:0;height:0;float:right;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;left:20px;}

JS：

function itemClicked(liObj)
{
 $("#down_blue_arr").remove();

    $(liObj).before('<div id="down_blue_arr"><span class="about_down_arrow" style="left: 20px;"></span><span class="about_down_arrow1" style="left: 20px;"></span></div>');  
}

Answer 4

请参阅此小提琴link。你把:hover放在li上并将每个箭头放在li里面并使li相对