-2

私はこのように入力された種類のサイドバーを持っています、各リンクはページ上の別の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;}

しかし、このコードは機能していません！これを行うにはどうすればよいですか、または現在のアプローチで何が間違っているのですか？

4

3 に答える 3

0

$（document）.readyの最後にある隠し文字。私の悪い。

于 2013-01-10T00:29:57.610 に答える
-1

これを試して： 

$(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();
    }); 
});
于 2012-12-19T17:13:53.253 に答える
-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');
    });

});​
于 2012-12-19T17:15:58.417 に答える