亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

基于當前選定選項卡的動態導航欄突出顯示

基于當前選定選項卡的動態導航欄突出顯示

桃花長相依 2022-07-01 16:47:18
我正在使用 Rails,并且有一個 Bootstrap 導航欄。我需要這樣做,以便根據您單擊的導航欄選項卡(主頁、OOTD、帳戶),它會以某種方式突出顯示它(如白色文本)。我試圖動態地讓它工作active,甚至使用一個應該切換它的功能,但它不起作用。我的application.html.erb,其中包含我的導航欄:<!DOCTYPE html><html>  <head>    <title>Finalproj493</title>    <%= csrf_meta_tags %>    <%= csp_meta_tag %>    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>  </head>  <body>    <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="width: 100%; height: 5vw;">    <ul class="navbar-nav mr-auto nav">      <li class="nav-item">        <a class="nav-link" href="/welcome/index">Home</a>      </li>      <li class="nav-item 1">        <a class="nav-link" href="/ootd">OOTD</a>      </li>      <li class="nav-item 2">        <a class="nav-link" href="/account">Account</a>      </li>    </ul>    </nav>    <br>    <br>    <%= yield %>  </body></html>我試圖使用該is_active()功能來動態切換(“Rails”方式),但它不起作用。該函數在 myapplication_helper.rb中,我在導航欄中添加了對它的函數調用(如上所示):module ApplicationHelper    def is_active(action)               params[:action] == action ? "active" : nil            endend也許我正在以錯誤的方式解決這個問題,但是有人可以提出一種active在 Rails 中結合導航欄樣式的簡單方法嗎?
查看完整描述

1 回答

?
婷婷同學_

TA貢獻1844條經驗 獲得超8個贊

您可以使用current_page?來設置活動類。您可以在以下位置創建一個方法app/helpers/application_helper.rb:


def active_class(path)

 "active" if current_page?(path)

end

你可以像這樣使用它:


<li class="<%= active_class(welcome_index_path) %>">

current_page?active如果當前請求 URI 是由path參數生成的,將返回 true 并設置類。


current_page? 您可以在此處閱讀更多信息。


查看完整回答
反對 回復 2022-07-01
  • 1 回答
  • 0 關注
  • 113 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號