클릭시 목록에서 앵커 태그 강조 표시

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

$ (문서) .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

난 당신의 코드가 거의 OK 그래서 당신이 링크를 따라야하고 싶지 않은 추측하지만이 같은 기본 이벤트를 방지해야합니다

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

});​