将活动课程添加到导航栏

Question

I'm sort of new to this, so please forgive me asking, but I'm using a slightly modified bootstrap navbar, and had the active class being properly assigned untill recently, but for some reason it stoped working with the last changes I made... (tried to revert it to see what screwed it up, to no avail...) Could some gentle soul enlighten me on how to make it work as it should?

Cheers! TF

    view:

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">ACAC</a>
            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="<?php echo base_url() ?>">INÍCIO<span class="sr-only">(current)</span></a></li>
                    <li><a href="<?php echo base_url() ?>noticias">NOTÍCIAS</a></li>
                    <li><a href="<?php echo base_url() ?>projecto">PROJECTO</a></li>
                    <li><a href="<?php echo base_url() ?>actividades">ACTIVIDADES</a></li>
                    <li><a href="<?php echo base_url() ?>galeria">GALERIA</a></li>
                    <li><a href="<?php echo base_url() ?>contactos">CONTACTOS</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <a href="#" class="lnklang">EN</a>

                </ul>
            </div>
        </div>
    </nav>
    .....
        <script>
    $(".nav a").on("click", function(){
       $(".nav").find(".active").removeClass("active");
       $(this).parent().addClass("active");
    });
    </script>

Answer 1

This is your code with hrefs removed and li content changed none of my edits changed how you code works, and it seems to work fine

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">ACAC</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a>One</a></li> <li><a>Two</a></li> <li><a>Three</a></li> <li><a>Four</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <a href="#" class="lnklang">EN</a> </ul> </div> </div> </nav> ..... <script> $(".nav a").on("click", function() { $(".nav").find(".active").removeClass("active"); $(this).parent().addClass("active"); }); </script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 

Answer 2

Clicking on the menu page navigates to new page. Active menu is changed but when the page is reloaded to new page it is reset to default.

You can check the page on document.ready and set the menu active for that page -

if (window.location.href.indexOf("noticias") > -1) {
     $(".nav").find(".active").removeClass("active");
     $('.nav a[href$="http://www.base_url.com/notice"]').parent().addClass("active");
}

change http://www.base_url.com/ to your actual base url.