Блог

Главная - Вопросы по программированию - Rails 3: jquery работает над переключением представления с помощью AJAX, как получить сфокусированное состояние для ссылки?

Rails 3: jquery работает над переключением представления с помощью AJAX, как получить сфокусированное состояние для ссылки?

#jquery #ruby-on-rails #css #ruby-on-rails-3

#jquery #ruby-on-rails #css #ruby-on-rails-3

Вопрос:

я только что изменил свои взгляды с помощью AJAX, но теперь я в тупике, как сделать так, чтобы запрашиваемое действие имело параметр css:focus type, чтобы, когда пользователь выбирает «About» и _about частичная загрузка, у меня может быть ссылка «About» со стилем, чтобы показать, что этоО странице. Большое спасибо!

Ответ №1:

Установите класс для нажатой ссылки, удалив этот же класс из всех других ссылок. Например:

 $('a.tab_link').click(function(){
  $('a.tab_link').removeClass('active')
  $(this).addClass('active')
})

// CSS
a.tab_link.active {
  color: red;
}

Комментарии:

1. выглядит хорошо! значит, это будет применяться только к ссылкам, к которым я добавляю class=»tab_link»? что означает $(this) ? Спасибо

2. Да. $(this) возвращает объект jQuery для ссылки, на которую был нажат.

3. Привет, кажется, я не могу заставить это работать. Не могли бы вы включить jsfiddle, чтобы я мог его увидеть? Большое спасибо.

Ответ №2:

у вас может быть такой помощник в вашем application_helper.rb

   def  nav_link(name, url)
    selected = url.all? { |key, value| params[key] == value }
    link_to(name, url, :class => (selected ? "youarehere tabs" : "tabs"))
  end

тогда, по вашему мнению, вы можете иметь 

 <div id="menu-header">
       <div class="subheader answers-subheader">
        <div id="tabs" class="tabs2">
          <%= nav_link "example", :view => nil %>
          <%= nav_link "example1", :view => "example1"%>
          <%= nav_link "example2", :view => "example2" %>
        </div>
       </div>
</div>

  <div id="menu-items">
     <%= %w[example example1 example2 ].include?(params[:view]) ? render(params[:view]) : render("example") %>
  </div>

затем в вашем приложении.js, который вы можете иметь

 $(function() {
    $(".tabs2 .tabs").click(function(e) {
      $("#tabs .tabs").removeClass("youarehere");
      $(this).addClass("youarehere");
      $("#menu-items").append('<div class="progress"><img src="/assets/loading.gif" width="32" height="32" alt="" /></div>');
      $.getScript(this.href);
      if (history amp;amp; history.replaceState) {
        history.replaceState(null, document.title, this.href);
      }
      e.preventDefault();
    });
});

я надеюсь, что это поможет