how to change active class when clicking a link javascript, codeigniter

Question

I know this is a very common question, I tried to change active class link with the help of javascript, css but I am not able to figure out how to do it. Need some help here...

view: Navbar header.php

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right" id="nav1" >
        <li class="active">
            <a href="<?php echo base_url(); ?>">Home</a>
        </li>
        <li>
            <a href="<?php echo base_url(); ?>about">About</a>
        </li>
        <li>
            <a href='<?php echo base_url(); ?>register'> Register</a>
        </li>
        <?php if($this->session->userdata('logged_in')) : ?>
        <li class="dropdown">
            <a class="link" class="dropdown-toggle" data-toggle="dropdown" href="#">Profile<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href='<?php echo base_url(); ?>profile/index'><span class="glyphicon glyphicon-edit"> </span> About me</a></li>
                <li><a href='<?php echo base_url(); ?>profile/getskill'><span class="glyphicon glyphicon-edit"> </span> Skills</a></li>
            </ul>
        </li>
        <?php endif; ?>
    </ul>
</div>

Javascrpit: file active.js loaded in footer of my page

$(function(){
    $('#nav1 a').filter(function(){
        return this.href==location.href}).parent().addClass('active').siblings().removeClass('active')
    // $('#nav1 a').click(function(){
    //  $(this).parent().addClass('active').siblings().removeClass('active')    
    // })
})

css:

ul #nav1 a { cursor: pointer; }

Answer 1

As far as I remembered using this framework, you don't need javascript just CSS which is the active class. You just need to use $this->uri->segment(); .

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right" id="nav1" >
            <li <?php if($this->uri->segment(1) == "/"){echo 'class="active"';}?>>
                <a href="<?php echo base_url(); ?>">Home</a>
            </li>
            <li <?php if($this->uri->segment(1) == "about"){echo 'class="active"';}?>>
                <a href="<?php echo base_url(); ?>/about">About</a>
            </li>
            <li <?php if($this->uri->segment(1) == "register"){echo 'class="active"';}?>>
                <a href="<?php echo base_url(); ?>/register">Register</a>
            </li>
    ...

Answer 2

Its a suggestion not solution

$class = $this->router->fetch_class();
 $method = $this->router->fetch_method();

these will give you class name n the method so you can you them like

    <li class="active">
  <a href="<?php echo base_url(); ?>" <?php if ($method == "view" && $class == "pages") {
   echo 'class="active"';
} ?>>Home</a>
</li>
<li>
  <a href="<?php echo base_url(); ?>about" <?php if ($method == "index" && $class == "profile") {
   echo 'class="active"';
} ?>>About</a>
</li>
<li>
  <a href='<?php echo base_url(); ?>register' <?php if ($method == "index" && $class == "register") {
   echo 'class="active"';
} ?>> Register</a>
</li>

Remember i assumed home is your controller name

Answer 3

If you have a lot of navigation items you can do it this way (very simplified)...

example:-

<ul>
  <li<?= if ( $_SERVER['REQUEST_URI'] == '/about' ): ?> id="active"<?php endif; ?>><a href="<?php echo base_url(); ?>about">About</a></li>
</ul>