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

});

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

3 个答案: