klasa aktywna nie działająca na stronie

Question

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. Tutaj mam różne menu na jednej stronie. Po kliknięciu każdego menu chcę, aby to menu było aktywne, ale tutaj nie działa.

To jest moja strona Widok:

<ul class="nav navbar-nav navbar-right"> 
    <li class="active"> <a class="page-scroll" href="<?php echo base_url();?>nowaste_control/index#about">About</a> </li> 
    <li class=""><a class="page-scroll" href="<?php echo site_url('nowaste_control/index#product'); ?>">Products</a> </li> 
    <li class=""> <a class="page-scroll" href="<?php echo base_url();?>nowaste_control/index#technology">Technology</a> </li> 
</ul> 

To jest mój jQuery:

<script type="text/javascript"> 
$('.nav navbar-nav li a').click(function($) { 
    $('a[href="'+window.location.pathname+window.location.hash+'"]').parent().addClass('active'); 
}); 
</script> 

Answer 1

Oto przykładowy sposób to zrobić przy okazji, ponieważ nie mogę mieć ciebie fragment kodu html do listy nawigacji właśnie stworzyliśmy prosty

..

tutaj jest html i stworzył

<div class="nav"> 
    <li class="active"> <a class="page-scroll" href="#about">About</a> </li> 
    <li class=""><a class="page-scroll" href="#product">Products</a> </li> 
    <li class=""> <a class="page-scroll" href="#technology">Technology</a> </li> 
</div> 

Oto javascript

$(document).ready(function(){ 
    $(document).on('click', '.nav li a', function() { 
    console.log($(this)); 
    $('.active').removeClass('active'); 
    $(this).parent().addClass('active'); 
    }); 
}); 

DEMO

Answer 2

Spróbuj następującą

$(function(){ 
    $('.page-scroll').on('click',function(){ 
     $('.active').removeClass('active'); 
    $(this).parent().addClass('active'); 
    }); 
    }); 

to wykorzystać, aby wyzwolić aktywną klasę na stronie obciążenia:

$(function(){ 
$('.active').removeClass('active'); 
$('a[href="'+window.location.href'"]').parent().addClass('active'); 
}); 

Answer 3

Spróbuj: możesz zawinąć skrypt w $(function(){..});, aby upewnić się, że DOM jest gotowy. Również Twój selektor jQuery muszą być poprawione, bo jak na class="nav navbar-nav navbar-right" Twój selektor musi być .nav.navbar-nav i nie .nav navbar-nav (ta mówi, że jest dzieckiem navbar-nav wewnątrz nav. Patrz poniżej kod

$(function(){ 
    //here instead of ".nav navbar-nav" change it to ".nav.navbar-nav" 
    $('.nav.navbar-nav li a').click(function($) { 
    $('a[href="'+window.location.pathname+window.location.hash+'"]').parent().addClass('active'); 
    }); 
}); 

A jeśli tworzysz te elementy dynamicznie następnie wykorzystać .on() jak pokazano poniżej -

$(function(){ 
     //here instead of ".nav navbar-nav" change it to ".nav.navbar-nav" 
     $(document).on('click','.nav.navbar-nav li a',function($) { 
     $('a[href="'+window.location.pathname+window.location.hash+'"]').parent().addClass('active'); 
     }); 
});