javascript - 使用 jquery 指示选定的列表项

Question

我需要指明一个选定的列表项。选择每个列表项时，我需要在每个列表项下加一条小线。我试过:

   <div id="types">
            <ul>
                <li>
                    <a href="#">item 1</a>
                    <div class="active"></div>
                </li>
                <li>
                    <a href="#">item 2</a>
                    <div></div>
                </li>      
                    <li>
                    <a href="#">item 2</a>
                    <div "></div>
                </li>   
            <li>
                    <a href="#">item 2</a>
                    <div ></div>
                </li>                                   
            </ul>
  </div>

在 CSS 中:

  .active{
    background-color: #5299bd !important;
    height: 7px;
    }

在 jquery 中:

    var classHighlight= 'active';

  var $thumb = $('#types ul li > a').click(function(e){
    e.preventDefault();
    $thumb.removeClass(classHighlight);
    $(this).addClass(classHighlight);
  });

它在 anchor 标签上突出显示，如元素 1 元素 2 等。但我需要一个小边框，如指示器/突出显示，在 anchor 标签下，元素 1，元素 2..

像这样，

请帮我做这个..谢谢

Answer 1

试试这个代码

$('#types ul li > a').click(function(e){
    $("#types div").removeClass('active');
    $(this).parent().find('div').addClass('active');
});

我个人认为你应该添加一个“虚拟”类，一条白线，这样列表项就不会“跳跃”。

---

编辑:正如 Frits van Campen 评论的那样，目标 <li>相反:

样式:

#types ul li {
    border: 1px solid #fff;
}
#types ul li.active {
    border: 1px dotted #5299bd;
}

标记:

<div id="types">
 <ul>
     <li>
        <a href="#">item 1</a>
      </li>
      <li>
         <a href="#">item 2</a>
       </li>      
       <li>
         <a href="#">item 2</a>
       </li>   
       <li>
         <a href="#">item 2</a>
       </li>                                   
   </ul>

脚本

$('#types ul li > a').click(function(e){
    $("#types li").removeClass('active');
    $(this).parent().addClass('active');
});

结果恕我直言，看起来更“专业”