jQuery Klasse hinzufügen basierend auf der Seite URL

Ich habe was ich denke, ist eine einfache Frage, aber ich kann es nicht für das Leben von mir arbeiten.jQuery Klasse hinzufügen basierend auf der Seite URL

Alles, was ich tun möchte, ist einige Javascript auf der Seite hinzuzufügen, die eine Klasse zum Hauptcontainer auf der Grundlage der URL hinzufügt.

Sagen wir, ich habe eine Seite auf root.com und die folgende HTML-Struktur (grob gesagt):

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    </head> 
    <body> 
    <div id="main" class="wrapper"> 
     Blah, blah, blah 
    </body> 
</html>

Was möchte ich ein Skript tun, ist, dass, wenn die Seite = (zum Beispiel) root .com/Technologie, es fügt dem Hauptdiv eine Klasse hinzu. So würde das Div jetzt aussehen wie:

Ich habe jquery geladen, also würde ich es gerne so machen.

Quelle

2012-04-02 Matt Martin

Sie verwenden können window.location, um die aktuelle URL abzurufen und dann basierend darauf zu wechseln:

$(function() { 
    var loc = window.location.href; // returns the full URL 
    if(/technology/.test(loc)) { 
    $('#main').addClass('tech'); 
    } 
});

Mit einem regulären Ausdruck wird festgestellt, ob die URL eine bestimmte Wortgruppe enthält (z. B. technology). Wenn dies der Fall ist, wird dem Element #main eine Klasse hinzugefügt.

Quelle

2012-04-02 20:13:46

Das funktioniert. Vielen Dank. –

Ausgezeichnet funktioniert super danke. – 422

@alex vidal Es funktioniert gut für mich, aber es lädt etwas später als normal. Ich verwende diese Aktion, um ein Untermenü offen zu halten, sobald der Benutzer in einer bestimmten Weise ist. Daher kann der Benutzer nach 1-2 Sekunden sehen, wie sich das Unterkategorie-Menü öffnet. Ich möchte es sofort machen, wie kann ich das vermeiden? –

Verwenden Sie das integrierte Objekt location, um die vollständige URL oder einige Teile davon zu ermitteln.

Quelle

2012-04-02 20:09:35 kirilloid

Klar ist das richtig, aber es beantwortet meine Frage von * wie * es nicht vollständig. –

würde etwas wie unten helfen? basierend auf anderen Antwort, nur durch

console.log (window.location) tun

, können Sie Reichtum Fülle von Informationen zu Ihrem Standort Objekt beziehen

 if(window.location.href=== "root.com/technology") { 
     $("#main").addClass("tech"); 
    }

Quelle

2012-04-02 20:11:58 DG3

Nun, hier ist, wie ich es tun würde:

switch (window.location.pathname) { 
    case '/technology': 
     $('#main').addClass('tech') 
    case '/something': 
    case '/somestuff': 
     $('#main').addClass('some') 
}

Auf diese Weise halten Sie Ihren Code sauber und man kann leicht einen anderen Fall hinzufügen.

Siehe here was window.location.pathname bedeutet.

Quelle

2012-04-02 21:05:54

Ich mag das, weil Sie, wie Sie sagen, einfach einen anderen Fall hinzufügen können, ohne die Dinge zu verpatzen. Aber ich kann es nicht zur Arbeit bringen ... –

Ich mag diese Antwort besser als die ausgewählte "beste" Antwort. Switch-Anweisungen sind viel sauberer als das Schreiben von Bedingungen. – IE5Master

jQuery Klasse hinzufügen basierend auf der Seite URL

Antwort

Verwandte Themen