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);
  });

它在锚标签上突出显示，如项目 1 项目 2 等。但我需要一个小边框，如指示器/突出显示，在锚标签下，项目 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');
});

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

Answer 2

$(this).addClass(classHighlight);
$(this).css('border-bottom', '8px solid cyan');