die aktuelle aktive Registerkarte in einem Bootstrap-Menü einstellen

Question

Ich habe folgende Bootstrap-Menü (Tabletten) in einem Teil definiert:

<ul class="nav nav-pills"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">Menu 1</a></li> 
    <li><a href="#">Menu 2</a></li> 
</ul> 

Hier sind einige Beispiele für Routen:

get 'institute/:institute_id/students' => 'students#index' , as: 'students_of_institute' 
    get 'students/:student_id'    => 'students#show' 

ich diese verwiesen haben teilweise in verschiedenen Ansichten. Wie ändere ich den aktuell aktiven Tab dynamisch?

Answer 1

Sie müssten den aktuellen Pfad überprüfen und, wenn er mit Ihrem Link übereinstimmt, fügen Sie eine active Klasse zu Ihrem li hinzu. Ein einfacher Weg wäre params[:controller] und params[:action] zu vergleichen.

Zum Beispiel:

# GET /posts 
params[:controller]  => "posts" 
params[:action]   => "index" 

Hier ist ein "schmutziges" Beispiel. Es ist besser, es zu einem gewissen Helfer ausrücken:

<ul class="nav nav-pills"> 

    <li class="<%= 'active' if params[:controller] == 'students' && params[:action] == 'index' %>"><%= link_to 'Students', students_path %></li> 

</ul> 

Answer 2

Eine Alternative zu @ Uzbekjon-Lösung ist die current_page? Hilfsmethode zu verwenden. Das erste Argument ist der Controller, das zweite (optional) ist die Aktion.

Da Ihre Navigationslinks Links auf oberster Ebene sind, müssen Sie die Aktion normalerweise nicht angeben. Auf diese Weise haben Sie immer noch eine aktive Pille für Unterseiten im selben Controller.

Z. B:

<ul class="nav nav-pills"> 
    <li class="<%= 'active' if current_page? controller: :students %>"> 
    <%= link_to 'Students', students_path %> 
    </li> 
</ul> 

Ich denke, das etwas eleganter ist.