Ich verstehe nicht, wie Twitter Bootstrap aktive Links für die Navigation ausführt. Wenn ich eine reguläre Navigation wie diese habe (mit Ruby on Rails Linking):
<ul class="nav">
<li class="active"> <a href="/link">Link</a> </li>
<li class=""> <a href="/link">Link</a> </li>
<li class=""> <a href="/link">Link</a> </li>
</ul>
Wie halte ich es basierend auf dem angeklickten Link aktiv?
ruby-on-rails
twitter-bootstrap
LearningRoR
quelle
quelle
Antworten:
Ich habe gerade eine Antwort auf dieselbe Frage hier gegeben. Twitter Bootstrap Pills with Rails 3.2.2
quelle
%li{:class => "#{'active' if current_page?(root_path)}"}=link_to "Home", root_path
controller_name
undaction_name
Helfern, anstatt über den Parameter-Hash auf sie zuzugreifen.Sie können so etwas verwenden (sehr ähnlich zu dem, was @phil erwähnt hat, aber etwas kürzer):
quelle
'active' if params[:controller] == 'controller1'
user_*_path
in hinzufügen<%= 'active' if current_page?(root_path) %>
?https://github.com/twg/active_link_to
#=> <li class="active"><a href="https://stackoverflow.com/users">Users</a></li>
quelle
Ich habe einen Helfer verwendet, um dies im Stil der Formularhelfer von Rails zu implementieren.
In einem Helfer (zB
app/helpers/ApplicationHelper.rb
):Dann in einer Ansicht (zB
app/views/layouts/application.html.erb
):In diesem Beispiel wird Folgendes erzeugt (auf der Seite "Benutzer"):
quelle
Verwenden Sie diese Option stattdessen, um einen aktiven Link in nav basierend auf der aktuellen Route ohne Servercode auszuwählen:
quelle
$('li.active').closest('.dropdown').addClass('active');
, um auch das übergeordnete Menü hervorzuheben.Ich habe Erfolg mit dem logischen und (
&&
) in haml gefunden :quelle
Für jeden Link:
oder auch
quelle
Ich bin mir nicht sicher, ob Sie nach der Verwendung des Twitter-Bootstrap-CSS oder der Rails-Seite fragen. Ich gehe von der Schienenseite aus.
Wenn ja, überprüfen Sie die
#link_to_if
Methode oder die#link_to_unless_current
Methodequelle
Heute hatte ich die gleiche Frage / das gleiche Problem, aber mit einem anderen Lösungsansatz. Ich erstelle eine Hilfsfunktion in application_helper.rb:
und der Link sieht so aus:
Sie können ersetzen
params[:action]
mitparams[:controller]
und Ihren Controller - Namen in der Verbindung gesetzt.quelle
Ich benutze dies für jeden
li
:<li><%= link_to_unless_current('Home', root_path) { link_to('Home', root_path, class: 'active') } %></li>
quelle
li
nicht eingestellt werdena
Sie können eine Hilfsmethode in definieren
application_helper.rb
Jetzt können Sie wie folgt verwenden:
create_link 'xyz', any_path
was als rendern würdeIch hoffe es hilft!
quelle
Sie sollten dies selbst tun, indem Sie CSS-Klassen bearbeiten. Das heißt, wenn ein Benutzer auf einen Link klickt, dann etwas tun (Zielaktion), den vorherigen Link inaktiv und den neuen Link aktiv setzen.
Wenn Ihre Links Sie zum Server führen (dh die Seite neu laden), können Sie den aktiven Link einfach korrekt auf dem Server rendern. Andernfalls müssen Sie Javascript verwenden, wenn Sie clientseitige Aufgaben ausführen (Tab-Fenster wechseln oder was auch immer).
quelle
Sie könnten tabellarisch für die Links verwenden
Artikel hier darüber, wie man tabulös mit Twitter Bootstrap und Rails 3.x kombiniert
quelle
Ich habe eine einfache Hilfsmethode mit dem eingebauten Ansichtshelfer geschrieben,
current_page?
wenn Sie einen benutzerdefiniertenclass
Namen inhtml_options
Hash angeben können .Beispiele (wenn Sie
root_path
unterwegs sind):quelle
Viele der Antworten hier haben Dinge, die funktionieren werden, oder Teilantworten. Ich habe eine Reihe von Dingen kombiniert, um diese Rails-Hilfsmethode zu erstellen, die ich verwende:
Es könnte noch
&block
ausgefallener sein, wenn Argumente überprüft werden, um link_to usw. zu unterstützen .quelle
Viele Antworten bereits, aber hier ist, was ich geschrieben habe, damit Bootstrap-Symbole mit aktivem Link funktionieren. Hoffe, es wird jemandem helfen
Dieser Helfer gibt Ihnen:
Fügen Sie dies in Ihre application_helper.rb ein
Und benutze den Link:
Das letzte Argument ist optional - es wird dem Link ein Symbol hinzugefügt. Verwenden Sie Namen von Glyphensymbolen. Wenn Sie ein Symbol ohne Text möchten:
quelle
Folgendes habe ich getan:
Ich habe einen ViewsHelper erstellt und in ApplicationController aufgenommen:
In ViewsHelper habe ich eine einfache Methode wie die folgende erstellt:
Aus meiner Sicht mache ich das:
quelle
Sie scheinen ein Navigationssystem zu implementieren. Wenn es komplex ist, kann es ziemlich hässlich und ziemlich schnell werden.
In diesem Fall möchten Sie möglicherweise ein Plugin verwenden, das dies unterstützt. Sie können navigasmic oder einfache Navigation verwenden (ich würde navigasmic empfehlen, da die Hauptebene in einer Ansicht bleibt, in die sie gehört, und nicht in einer bestimmten Konfiguration).
quelle
Kürzester Code
Dies befasst sich sowohl mit Navigations- als auch mit Subnavigationslistenelementen. Sie können entweder einem Array einen einzelnen Pfad übergeben und sich mit beiden befassen.
application_helper
Ansicht (html.erb)
quelle
Mit Rubin auf Sinatra ..
Ich verwende das nackte Bootstrap-Thema. Hier ist der Beispiel-Navigationscode. Beachten Sie den Klassennamen des Elements -> .nav -, auf den im Java-Skript verwiesen wird.
Fügen Sie auf der Ansichtsseite (oder teilweise) Folgendes hinzu: Javascript, dies muss jedes Mal ausgeführt werden, wenn die Seite geladen wird.
Haml View Snippet ->
Stellen Sie im Javascript-Debugger sicher, dass der Wert des Attributs 'href' mit window.location.pathname übereinstimmt. Dies unterscheidet sich geringfügig von der Lösung von @Zitrax, mit deren Hilfe ich mein Problem beheben konnte.
quelle
Grundlegend, kein Helfer
Ich benutze dies, da ich mehr als eine Klasse habe -
quelle
schlank
quelle