CODEWITHSUNDEEP
javascript
Ninja Dude
Ninja Dude

Reputation: 1392

Make li active for bootstrap nav navbar-nav

<!-- BEGIN HEADER MENU -->
            <div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown dropdown-fw dropdown-fw-disabled active open selected">
                        <a href="javascript:;" class="text-uppercase">
                            <i class="icon-home"></i> Home </a>
                        <ul class="dropdown-menu dropdown-menu-fw">
                            <li class="active">
                                <a href="{{ url('/externalphotoviewer') }}">
                                    <i class="icon-bar-chart"></i> View Photo </a>
                            </li>
                            <li>
                                <a href="{{ url('about') }}">
                                    <i class="icon-bulb"></i> About </a>
                            </li>
                            <li>
                                <a href="{{ url('contact') }}">
                                    <i class="icon-graph"></i> Contact </a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown dropdown-fw dropdown-fw-disabled ">
                        <a href="javascript:;" class="text-uppercase">
                            <i class="icon-home"></i> Upload </a>
                        <ul class="dropdown-menu dropdown-menu-fw">
                            <li class="active">
                                <a href="{{ url('picture/create') }}">
                                    <i class="icon-bar-chart"></i> Upload Photo </a>
                            </li>
                            <li>
                                <a href="{{ url('about') }}">
                                    <i class="icon-bulb"></i> View Photo List </a>
                            </li>
                        </ul>
                    </li>
              </ul>
            </div>
            <!-- END HEADER MENU -->

Im trying to make the selected li tag active whenever a user click on it. It should be selected as the active tag. I tried the below code but it doesnt work. I am still very new to javascript. please help thank you

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

Upvotes: 0

Views: 253

Answers (1)

Amal
Amal

Reputation: 3426

Try this code

li is element selector not a class selector

 $(".dropdown-menu-fw li").on("click", function(e) {
   e.preventDefault();//Remove this line to route to links
   e.stopPropagation();
   $(this).parents('.open').find("li").removeClass("active");
   $(this).addClass("active");
  });


 $(".dropdown-menu-fw li").on("click", function(e) {
   e.preventDefault();//Remove this line to route to links
   e.stopPropagation();
   $(this).parents('.open').find("li").removeClass("active");
   $(this).addClass("active");
  });
  
$(".dropdown-fw").on("click",function(){
  $(".dropdown-fw").removeClass("open selected");
  $(this).addClass("open selected");
})
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css');
.collapse {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown dropdown-fw dropdown-fw-disabled active open selected">
                        <a href="javascript:;" class="text-uppercase">
                            <i class="icon-home"></i> Home </a>
                        <ul class="dropdown-menu dropdown-menu-fw">
                            <li class="active">
                                <a href="{{ url('/externalphotoviewer') }}">
                                    <i class="icon-bar-chart"></i> View Photo </a>
                            </li>
                            <li>
                                <a href="{{ url('about') }}">
                                    <i class="icon-bulb"></i> About </a>
                            </li>
                            <li>
                                <a href="{{ url('contact') }}">
                                    <i class="icon-graph"></i> Contact </a>
                            </li>
                        </ul>
                    </li>
                    <li class="dropdown dropdown-fw dropdown-fw-disabled ">
                        <a href="javascript:;" class="text-uppercase">
                            <i class="icon-home"></i> Upload </a>
                        <ul class="dropdown-menu dropdown-menu-fw">
                            <li class="active">
                                <a href="{{ url('picture/create') }}">
                                    <i class="icon-bar-chart"></i> Upload Photo </a>
                            </li>
                            <li>
                                <a href="{{ url('about') }}">
                                    <i class="icon-bulb"></i> View Photo List </a>
                            </li>
                        </ul>
                    </li>
              </ul>
            </div>

Hope this helps!

Upvotes: 1

Related Questions