如何在導航欄位於應用程序模板中時激活選項卡？

我有一個簡單的導航欄，如下所示：如何在導航欄位於應用程序模板中時激活選項卡？

<ul class="nav"> 
    <li><a href="<%= index_url %>">Home</a></li> 
    <li><a href="#about">About</a></li> 
    <li><a href="<%= users_url %>">Users</a></li> 
</ul>

哪個是application.html.erb文件中軌項目的一部分。我想要在當前頁面上設置class="active"屬性，但由於導航欄位於模板中，導致<%= yield %>應用程序的其餘部分，因此這很複雜。我如何根據我正在加載的頁面可靠地設置活動選項卡？

... javascript刪除，因爲它是從實際問題分心。

澄清：

滑軌，及包括本導航調用<%= yield %>和渲染我加載任何視圖之前加載這使得一切application.html.erb。

我希望「用戶」選項卡在顯示users/index.html.erb文件時具有class="active"，或者users/show.html.erb（基本上來自用戶模型的任何內容）在那裏正確的軌道方式來做到這一點？

我知道我可以將導航欄移動到每個模型的視圖模板並手動設置活動類，但這不是很「幹」。

來源

2011-12-01 Chris Matta

您當前的代碼刪除，然後添加類到一個點擊的元素只有 - 你大概的意思'$（」 NAV。 > li「）。removeClass（」active「）'首先從所有'li'中移除類。 – pimvdb

好的，所以我的JavaScript是不正確的，但我原來的問題仍然存在，我怎麼能在導航欄加載後（通過應用程序模板）更改鏈接上的活動類。只要我設置了一個班級並點擊，它將加載新頁面並清除班級設置。 –

可能不是你正在尋找的東西，但我通常只寫一個名爲「tab」的快速助手，讓我設置一個值可以拉入我對該選項卡的視圖中，然後使用條件在選項卡上設置類。

# Helper 
def tab(value) 
    @page_tab = value 
end 

# View 
<% tab "about" %> 

# Layout  
<ul class="nav"> 
    <li><a href="<%= index_url %>" <%= class=\"active\" if @page_tab == "home" %>>Home</a></li> 
    <li><a href="#about" <%= class=\"active\" if @page_tab == "about" %>>About</a></li> 
    <li><a href="<%= users_url %>" <%= class=\"active\" if @page_tab == "users" %>>Users</a></li> 
</ul>

來源

2011-12-03 04:21:16 commondream

我認爲這是我正在尋找的。謝謝。 –

我喜歡這個解決方案，但它在Rails 3.2中似乎不再適用。這個<％= class = \「active \」如果@page_tab ==「home」％>不再有效 - 獲取語法錯誤。 –

而是這個

$(".nav > li").click(function(){ 
    $(".nav > li").removeClass("active"); // this line will remove class active from every li 
    $(this).addClass("active"); 
});

注意這個

$(".nav > li").click(function(){ $(this).removeClass("active"); $(this).addClass("active"); });

使用 -這個腳本不僅沒有刷新頁面上工作只能用來當同一頁面上，而在你的情況下將無法正常工作

來源

2011-12-01 17:57:20 Wazzzy

您也可以在您的視圖中定義一個變量，例如，

- @active_tab = 'dashboard'

，然後在佈局模板做這樣的事情（HAML版）：

%ul.nav 
    - ['dashboard', 'reports'].each do |tab| 
    %li{:class => ('active' if @active_tab == tab)} 
     = link_to t('nav_'+tab), send(tab+'_path')

來源

2013-06-04 14:46:57 Anton

如何在導航欄位於應用程序模板中時激活選項卡？

回答

相關問題