javascript - 使 li 激活 bootstrap nav navbar-nav

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>

希望这有帮助!