2013-08-13 16 views
7

Wiem, że to pytanie ma wiele wspólnego, ale po prostu nie mogę wymyślić, jak to zrobić, korzystając z już wysłanych postów.Jak dodać aktywną klasę do hiperłączy hiperłącza?

Mam nagłówek z linkami nawigacyjnymi. Chciałbym dodać class="active" do linku, który jest aktywny w tej chwili.

Jak mogę to zrobić, jeśli mam następującą nawigację?

<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> 

próbowałem tego, ale to nie działa:

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

Może istnieje lepszy CodeIgniter-owski sposób?

Odpowiedz

13

Wypróbuj ten jeden.i myślę, że nie ma potrzeby javascript lub jquery.

Jeśli używasz codeigniter, możesz użyć klasy URI.

<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> 

proszę dać mi znać, jeśli napotkają żadnych problemów

+0

który działa Chyba, pozwól mi najpierw spojrzeć, czy to działa na innych linków: D –

+0

Tak to działa: D dzięki: D –

+0

krótsza wersja: ' uri-> segment (1) == "szukaj"))? "active": ""?> ' –

0
if (href === window.location.pathname) { 
    $('a[href='+ href +']').addClass('active'); 
} 
+1

nie działa :( –

+0

można zobaczyć na stronie tutaj: http: //kees.een-site-bouwen.nl/search Właśnie skierowałem/wyszukałem, czy działa. window.location.pathname to/search, więc nie wiem, dlaczego nie działa. –

+0

@KeesSonnema pozwala mi sprawdzić – som

0

Spróbuj tego:

<a class="<?=(current_url()==base_url('search')) ? 'active':''?>" href="<?=base_url('search')?>"> 
5

stworzyłem pomocnika i zapisywane do katalogu pomocnika o nazwie jako „menu_helper.php”:

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

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

Następnie w config/autoload.php dodaję "menu" jako pomocnika w linii 91.

Ostatnim krokiem jest umieszczenie kodu do wydrukowania „aktywny” klasę podczas uzyskiwania dostępu do strony (tj Zaloguj strony):

<li class="<?php echo activate_menu('login'); ?>">  
    <?php echo anchor('login', 'Login'); ?> 
</li> 
+0

To zasługuje na odpowiedź, bardzo eleganckie rozwiązanie. Dobra robota! –

+0

Działa idealnie - dzięki! – Jordan

Powiązane problemy