Wie fügen Sie die active-Klasse von codeigniter hyperlinks?

Ich weiß, diese Frage kommt ganz viel, aber ich kann einfach nicht herausfinden, wie dies zu tun mit dem, bereits beantwortete Beiträge.

Ich habe einen header mit der navigation links. Ich möchte hinzufügen class="active" auf den link, der ist aktiv im moment.

Wie könnte ich dies tun, wenn ich die folgende navigation?

<nav>
    <ul id="main_nav">
        <li class="home">
            <a href="search">
                <i class="icon-search"></i>
                <span>BEDRIJF ZOEKEN</span>
            </a>
        </li>
        <li class="categorie">
            <a href="categorieen/all">
                <i class="icon-list-ul"></i>
                    <span>CATEGORIE</span>
            </a>
        </li>
        <li class="aanbieding">
            <a href="aanbiedingen">
                <i class="icon-shopping-cart"></i>
                    <span>AANBIEDING</span>
            </a>
        </li>
        <li class="vacature">
            <a href="vacatures">
                <i class="icon-copy"></i>
                <span>VACATURE</span>
            </a>
        </li>
        <li class="agenda">
            <a href="agenda">
                <i class="icon-calendar"></i>
                <span>AGENDA</span>
            </a>
        </li>
        <li class="contact">
            <a href="contact">
                <i class="icon-envelope"></i>
                <span>CONTACT</span>
            </a>
        </li>
    </ul>
</nav>

Ich habe versucht, aber es hat nicht funktioniert:

<script>
$(function() {
    var href = $(this).find('a').attr('href');
    alert(window.location.pathname)
    if (href === window.location.pathname) {
      $(this).addClass('active');
    }
}); 
</script>

Vielleicht gibt es eine bessere Codeigniter-ish Weg?

InformationsquelleAutor Kees Sonnema | 2013-08-13
  1. 14

    versuchen, diese ein.ich denke, keine Notwendigkeit von javascript oder jquery.

    Wenn Sie mit codeigniter, dann können Sie die URI-Klasse.

    <li class="home">
    <a class="<?php if($this->uri->segment(1)=="search"){echo "active";}?>" href="<?=base_url('search')?>">
        <i class="icon-search"></i>
        <span>BEDRIJF ZOEKEN</span>
    </a>
</li>

    bitte lassen Sie mich wissen, wenn Sie irgendwelche Schwierigkeiten stoßen

    • Das funktioniert, denke ich, lassen Sie mich zuerst schauen, ob es funktioniert für andere links 😀
    • Ja, das funktioniert 😀 danke 😀
    • kürzere version: <?=($this->uri->segment(1) == "search")) ? "active" : "" ?>
    InformationsquelleAutor ABorty
  2. 7

    Erstellte ich ein Helfer und gespeichert es in der Helfer-Verzeichnis, benannt als "menu_helper.php":

    <?php 
if(!defined('BASEPATH')) exit('No direct script access allowed');

if(!function_exists('active_link')) {
  function activate_menu($controller) {
    //Getting the class instance.
    $ci = get_instance();
    //Getting the router class to actived it.
    $class = $ci->router->fetch_class();
    return ($class == $controller) ? 'active' : '';
  }
}

    Dann in config/autoload.php Hinzugefügt habe ich die "Menü" - als Helfer auf der Linie 91.

    Der Letzte Schritt ist, um den code für den Druck der "active" - Klasse, die beim Zugriff auf die Seite (z.B. Login-Seite):

    <li class="<?php echo activate_menu('login'); ?>">    
  <?php echo anchor('login', 'Login'); ?> 
</li>
    • Das verdient die Antwort, sehr elegante Lösung. Schöne Arbeit!
    • Funktioniert perfekt --danke!
    InformationsquelleAutor Lesley Fernandes Moreira
  3. 0
    if (href === window.location.pathname) {
   $('a[href='+ href +']').addClass('active');
}
    • Funktioniert nicht 🙁
    • Sie können sehen auf der site hier: kees.een-site-bouwen.nl/search ich habe gerade gerichtet /Suche, um zu sehen, ob es geklappt hat. das Fenster.Lage.Pfadname /search also ich weiß nicht, warum es nicht funktioniert.
    • lassen Sie mich überprüfen
    • Verwenden $('a[href*='+ href +']') oder $('a[href$='+ href +']') statt.
    • Gute Jquery-alternative dann. Trotzdem danke, aber ich bin mit dem codeigniter-Methode anstelle 🙂
    InformationsquelleAutor som
  4. 0

    Versuchen, diese:

    <a class="<?=(current_url()==base_url('search')) ? 'active':''?>" href="<?=base_url('search')?>">
    InformationsquelleAutor Hossein
Schreibe einen Kommentar