为bootstrap nav navbar-nav激活li

Question

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

我正在尝试使选定的li标记在用户单击它时处于活动状态。它应该被选为活动标签。我尝试了下面的代码，但它不能工作。我对javascript还是很陌生的。请帮帮忙谢谢

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

Answer 1

尝试此代码

li是元素选择器，而不是类选择器

 $(".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>

​

希望这能有所帮助！