使用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');
});

我个人认为你应该添加一个“虚拟”类，一条白线，所以list-items不会“跳”。

---

修改：正如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');
});

以更“专业”的眼光看待imho

Answer 2

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