1

I have a menu which has a ul like:

<ul class="tabs pull-right">
  <% if user_signed_in? %>
  <li class="active"><a href="/dashboard">Dashboard</a></li>
  <% else %>    
  <li class="active"><a href="/">Home</a></li>
  <% end %>
  <% if user_signed_in? %>
  <li><a href="/upgrade">Upgrade</a></li>
  <% else %>
  <li><a href="/pricing">Pricing</a></li>
  <% end %>

My jquery code is

$(document).ready(function(){
  $(".tabs li").click(function() {
    $(".tabs li").removeClass('active');

    var selected_tab = $(this).find("a").attr("href");
    $(this).addClass("active");
    $(selected_tab).fadeIn();
    return false;
  });
});

My css

.tabs_wrapper { width: 900px; } 
.tabs_container { border-bottom: 0px solid #ccc; } 
.tabs { list-style: none; padding: 5px 0 4px 0; margin: 0 0 0 10px; font: 1.15em arial; } 
.tabs li { display: inline; } 
.tabs li a { border: 1px solid #ccc; 
             padding: 4px 6px; text-decoration: none; 
             background-color: #eeeeee; border-bottom: none; 
             outline: none; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; 
             -webkit-border-top-left-radius: 5px; 
             -webkit-border-top-right-radius: 5px; } 
.tabs li a:hover { background-color: #dddddd; padding: 4px 6px; } 
.tabs li.active a { border-bottom: 1px solid #fff; background-color: #fff; padding: 4px 6px 5px 6px; border-bottom: none; } 
.tabs li.active a:hover { background-color: #eeeeee; padding: 4px 6px 5px 6px; border-bottom: none; }

My problem is when I try to click pricing, the page is activating but in menu it is showing home...it is not activating the pricing tab in menu .... can any one of u tell what's the problem?

4

1 に答える 1

0

あなたのjQueryコードは私にはあまり意味がありません。

これが私が理解している限りのコードです

  1. クリックイベントをすべてのタブ要素にバインドする
  2. すべてのタブ要素から「アクティブ」クラスを削除します
  3. クリックしたタブの「href」属性値を取得します
  4. クリックしたタブにアクティブなクラスを追加します
  5. この次の部分$（selected_tab）の部分では、引き出したhref値がjQueryオブジェクトafaikに変換できないというエラーが発生するはずです。

あなたがやろうとしていることについて、もう少し情報を提供してください。

私が知る限り、タブをクリックすると、同じページのDOM要素を参照せずにhref属性のページをロードしてページを更新することができます。その場合、クリックすると移動するため、上記のコードでアクティブなタブが設定されることはありません。

私が持っている小さな情報に基づいて、あなたはこのようなことをすることができますが、それは理想的ではないでしょうが、おそらくちらつきます。

$(function() {
  // cache your tabs selector
  var $tabs = $('.tabs li');

  // see what page you are currently on to compare to tabs
  var pageLocation = window.location.pathname;

  // remove the Active class from the tabs
  $tabs.removeClass('active');

  // loop through your tabs
  $tabs.each(function () {
    var $tab = $(this);
    var tabHref = $tab.attr('href');

    if (tabHref === pageLocation){
      $tab.addClass('active');
    }
  });

  // Alternative dont add active to any tabs in your template and select by href
  // this selector would be slow
  $('a[href="'+pageLocation+'"]').parent().addClass('active');
});

http://jsfiddle.net/billpull/D3jKZ/

前に言ったように、これは理想的ではありません。これは、RoR / erbテンプレートにあまり慣れていないテンプレートに設定したいものである可能性が高いですが、タブを使用して基本テンプレートを設定し、それらを実行するループを作成することで、何かを実行できると思います。アクティブなページをチェックします。これがPython用のjinjaの例です

Base.html

{% set logged_in_tabs = [
   ('/dashboard', 'dashboard', 'Dashboad'),
   ('/upgrade', 'upgrade', 'Upgrade')
] %}

{% set unauthed_tabs = [
   ('/', 'home', 'Homepage'),
   ('/pricing', 'pricing', 'Pricing')
] %}

{% set active_page = active_page|default("home") %}

<ul class="tabs">
  {% if user_signed_in %}
    {% for href, id, caption in logged_in_tabs %}
       <li {% if id == active_page %}class="active"{% endif %}><a href="{{ href|e }}">{{ caption|e }}</a></li>
    {% endfor %}
  {% else %}
       {% for href, id, caption in unauthed_tabs %}
         <li {% if id == active_page %}class="active"{% endif %}><a href="{{ href|e }}">{{ caption|e }}</a></li>
       {% endfor %}
  {% endif %}
</ul>

Dashboard.html

{% extends 'Base.html' %}
{% set active_page = 'dashboard' %}

可能であれば、それをerbに変換する方法を見つける必要があります。タブはとにかく一般的な要素のように思われるので、ダッシュボードやアップグレードなどによって拡張されるマスターテンプレートの一部または一部である必要があります。このアプローチにより、クライアント側でタブを強調表示する作業が維持され、ちらつきが防止されます。これはページの読み込み時に発生する可能性があります。

于 2013-02-15T18:26:35.510 に答える