連絡先管理アプリケーションを作っているときに'クリックしているページによってnavberのタブに色を付け足いな'と考えたので、そのときの実装を解説します。
1. 実際の画面
クリックしたページによって各タブがアクティブになっていることが確認できます。
Dashboradをクリック時
All Contactsをクリック時
各連絡先をクリックした時
2. 実装の解説
流れとしては次のとおり。
- 現在のページのuriを取得
- classにactive
を設定
- bootstrap3の使用によりアクティブなメニューの色が変わる
というようになっています。
まずはnavbar.html.slim(manageContact/app/views/layouts/navbar.html.slim)のコードを解説。
--< 省略 >-- ul.nav.navbar-nav li class="#{active_item('dashboard')}" = link_to 'Dashboard',dashboard_path li class="#{active_item('contacts')}" =link_to 'All Contacts',contacts_path --< 省略 >--
該当するページによってactive_itemメソッドを実行させています。
次にactive_itemのメソッドについて解説 ファイルはapplication_helper.rb(manageContact/app/helpers/application_helper.rb)
--< 省略 >-- def active_item(uri) uri_segment = request.fullpath.split(/\/|\?/) uri_segment[1] === uri ? 'active' : '' end --< 省略 >--
ここで注目したい点は2つ。
- request.fullpath
request.fullpathは次に遷移したいurlを示している。urlによって次のように取得できます。
"/dashboard" "/contacts" "/contacts/99/edit"
そして取得した値をsplitすることでurlが単語単位で分割された配列を取得できます。
["", "dashboard"] ["", "contacts"] ["", "contacts", "99", "edit"]