[Ajax] Navigation class="active" anhand URL vergeben

Dieses Thema im Forum "Webentwicklung" wurde erstellt von furious1, 26. Juni 2010 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 26. Juni 2010
    Navigation class="active" anhand URL vergeben

    Hi,

    habe hier eine Navi im Stile von:
    HTML:
    <ul id="sub_navi" class="white upper">
    <li><a href="irgendwas/das/">Test 1</a></li>
    <li><a href="irgendwas/hier/">Test 2</a></li>
    </ul>
    So, würde nun gerne mit jQuery die URL auslesen und falls es der Link im <a>-Tag ist, dem vorhergehenden <li> ein class="active" anhängen.

    Durch Internetrecherche habe ich folgendes gefunden (replace, da ich das in einem Unterordner teste):
    HTML:
    <script language="JavaScript" type="text/javascript">
     function js_replace(search, replace, subject) {
     return subject.split(search).join(replace);
     }
    
     $(function() {
     var path = js_replace('/unterordner/', '', window.location.pathname);
    
     if ( path )
     $('#sub_navi a[href$=' + path + ']').prev('li').addClass('active');
     });
    </script>
    Ist der Ansatz richtig oder liege ich mit dem Schnipsel total falsch?

    Danke schonmal!

    Gruß, f1
     
  2. 26. Juni 2010
    AW: Navigation class="active" anhand URL vergeben

    Der Ansatz ist goldrichtig, allerdings musst davor das zuletzt als aktiv-markierte wieder entmarkieren, falls die Links entsprechend weitere Ajax anstößt.
     
  3. 27. Juni 2010
    AW: Navigation class="active" anhand URL vergeben

    Funktionieren tut es aber leider nicht
     
  4. 27. Juni 2010
    AW: Navigation class="active" anhand URL vergeben

    So sollte es funktionieren!

    Code:
    $('#sub_navi a[href*="' + path + '"]')
     
  5. 27. Juni 2010
    AW: Navigation class="active" anhand URL vergeben

    Danke für den Vorschlag (bw), geht aber leider nicht. Ich hab mir via Alert den ausgelesenen Pfad anzeigen lassen und den mit dem im <a>-Tag verglichen. Also die stimmen überein :>

    HTML:
     <script language="JavaScript" type="text/javascript">
     function js_replace(search, replace, subject) {
     return subject.split(search).join(replace);
     }
    
     $(function() {
     var path = js_replace('/cmv2/', '', window.location.pathname);
     /* alert(path); */
     if ( path ) {
     alert(path);
     $('#sub_navi a[href*="' + path + '"]').prev('li').addClass('active');
     }
     });
     </script>
    Achja, eine "active"-Class gibts auch ;P

    Sonst noch Vorschläge?

    Danke
     
  6. 27. Juni 2010
    AW: Navigation class="active" anhand URL vergeben

    PREV kann in deinem Code nicht funktionieren da dein A-Tag in dem LI-Tag ist.


    (Ungetestet)
    Code:
     <script language="JavaScript" type="text/javascript">
     function js_replace(search, replace, subject) {
     return subject.split(search).join(replace);
     }
    
     $(function() {
     var path = js_replace('/cmv2/', '', window.location.pathname);
     /* alert(path); */
     if ( path ) {
     alert(path);
     $('#sub_navi a[href*="' + path + '"]').parent('li').addClass('active');
     }
     });
     </script>
     
  7. 27. Juni 2010
    AW: Navigation class="active" anhand URL vergeben

    Das funktioniert! Vielen Dank! Muss mich mal mehr damit beschäftigen.

    Nun sind dann alle angeklickten <li>´s mit dem "active" versehn, d.h. ich muss die Klasse vorher überall entfernen.

    Nach Google bin ich bei each(), nur leider setzt er mir dann keine "active"´s mehr.

    HTML:
     <script language="JavaScript" type="text/javascript">
     function js_replace(search, replace, subject) {
     return subject.split(search).join(replace);
     }
    
     $(function() {
     var path = js_replace('/cmv2/', '', window.location.pathname);
    
     /* remove each active class */
    
     $('#sub_navi').children().each(
     function(){
     $(this).removeClass('active');
     }
     }
    
    
     if ( path ) {
     $('#sub_navi a[href*="' + path + '"]').parent('li').addClass('active');
     }
     });
     </script>
     
  8. 27. Juni 2010
    AW: Navigation class="active" anhand URL vergeben

    Code:
    function js_replace(search, replace, subject) {
     return subject.split(search).join(replace);
     }
    
    $(function() {
     var path = js_replace('/cmv2/', '', window.location.pathname);
    
     /* remove each active class */
     $('#sub_navi li').removeClass('active');
    
     $('#sub_navi a[href*="' + path + '"]').parent('li').addClass('active');
     });
     
  9. 27. Juni 2010
    AW: Navigation class="active" anhand URL vergeben

    Danke Nanobyte, habs nun hinbekommen dank deiner Hilfe!

    Falls es jmd. interessiert
    HTML:
     <script language="JavaScript" type="text/javascript">
     function js_replace(search, replace, subject) {
     return subject.split(search).join(replace);
     }
    
     $(function() {
     function js_replace(search, replace, subject) {
     return subject.split(search).join(replace);
     }
    
     $(function() {
     var path = js_replace('/unterordner/', '', window.location.pathname);
    
     /* remove each active class */
     $('#sub_navi li').each (
     function() {
     $(this).removeClass('active');
     });
    
     $('#sub_navi a[href*="' + path + '"]').parent('li').addClass('active');
     });
     });
     </script>
    Eine Frage hab ich jedoch noch: Wenn ich 2 Links drin hab, bsp. so:
    HTML:
    <ul id="sub_navi" class="white upper"> 
    <li><a href="irgendwas/">Main</a></li> 
    <li><a href="irgendwas/hier/">Sub</a></li> 
    </ul>
    Dann markiert er mir beide als active. Denke mal, weil "irgendwas/" in beiden vorkommt? Kann ich das irgendwie wie mit Regex einfach begrenzen? Bsp. ^irgendwas/$

    Danke
     
  10. 27. Juni 2010
    AW: Navigation class="active" anhand URL vergeben

    nicht getestet

    HTML:
    <script type="text/javascript">
     $(function() {
     var path = String(window.location.pathname).replace(/\/unterordner\//g, '');
    
     /* remove each active class */
     $('#sub_navi li').each(function() { $(this).removeClass('active'); });
     
     $('#sub_navi a').each(function() {
     if(this.href.match(new RegExp('^' + path + '$')))
     $(this).parent('li').addClass('active');
     });
     });
    </script>
     
  11. 28. Juni 2010
    AW: Navigation class="active" anhand URL vergeben

    nun gehts leider gar nicht mehr Hast du noch Vorschläge, was man am Code ändern könnte damits geht?
     
  12. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.