javascript - 单击时突出显示列表中的锚标记

Question

我有一个类似这样填充的侧边栏，每个链接在页面上的另一个 div 中加载不同的 html；

<div id = "sidebar-links">

      <% @locations.each do |locs| %>

        <p style = "border-bottom: 1px black solid">
          <a href = "#" class = "sidebar-click" onclick = 'renderLocation(+' <% locs %> +')'><%= locs['Address'] %></a>
        </p>

      <% end %>

</div>

我想在单击每个链接时突出​​显示它。单击另一个链接后，我希望将其突出显示。目前这就是我正在做的；

$(document).ready(function() { // Start up jQuery
        $('a.sidebar-click').click(function() {
          $('a.sidebar-click').removeClass('ui-state-highlight');
          $(this).addClass('ui-state-highlight');
          return false;
    }); 
    });​

和风格;

.ui-state-highlight {border: 4px solid #ffffa1; margin-right: 3px;}

但是这段代码不起作用！我该怎么做，或者在我目前的方法中我做错了什么？

Answer 1

$(document).ready 末尾的隐藏字符。我的错。

Answer 2

尝试这个：

$(document).ready(function() {
    $('a.sidebar-click').click(function(e) {
      var this = $(this);
      $('#sidebar-links a').each(function() {
        $(this).removeClass('ui-state-highlight');
      });
      this.toggleClass('ui-state-highlight');
      e.preventDefault();
    }); 
});

Answer 3

我猜你不希望链接被跟踪，所以你的代码几乎没问题，但你需要防止默认事件，如下所示：

$(document).ready(function() { // Start up jQuery

    $('a.sidebar-click').click(function(e) {
        e.preventDefault(); // prevent following link's href
        $('a.sidebar-click').removeClass('ui-state-highlight');
        $(this).addClass('ui-state-highlight');
    });

});​