javascript - 将导航栏元素设置为事件 onclick

Question

我在使导航栏项在单击时处于事件状态时遇到了很多麻烦。我已将此导航栏文件包含到不同的页面，但是当我单击某个元素时，它不会更改其类或样式。我尝试了很多技术，从使用 jquery onclick 函数添加单击时激活的类到更改更改的 css onclick，但没有任何效果。任何可能的帮助将不胜感激。导航栏代码如下:

<div class="header" id="home">
    <div class="content white agile-info">
        <nav class="navbar navbar-default " role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <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="index.php">
                        <h1><span class="fa fa-signal" aria-hidden="true"></span> Soft <label>Hr Agency</label></h1>
                    </a>
                </div>
                <!--/.navbar-header-->
                <div class="nav navbar-nav  mr-auto" id="bs-example-navbar-collapse-1" style="margin-right: -5%">

                    <nav class="link-effect-2" id="link-effect-2">
                        <ul class="nav navbar-nav navbar-right" >
                            <li class="active"><a href="index.php" class="effect-3">Home</a></li>
                            <li class="dropdown">
                                <a href="services.php" class="dropdown-toggle effect-3" data-toggle="dropdown">Services <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="services.php">Services 2</a></li>
                                    <li class="divider"></li>
                                    <li><a href="services.php">Services 3</a></li>
                                    <li class="divider"></li>
                                    <li><a href="codes.php">Codes</a></li>
                                    <li class="divider"></li>
                                    <li><a href="icons.php">Icons</a></li>
                                    <li class="divider"></li>
                                    <li><a href="services.php">One more separated link</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="jobs.php" class="dropdown-toggle effect-3" data-toggle="dropdown">Jobs<b class="caret"></b></a>
                                <ul class="dropdown-menu multi-column columns-2">
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <ul class="multi-column-dropdown">
                                                <li><a href="jobs.php">Walk-ins</a></li>
                                                <li><a href="jobs.php">Bpo Jobs</a></li>
                                                <li><a href="jobs.php">Teaching Jobs</a></li>
                                                <li><a href="jobs.php">Diploma Jobs</a></li>
                                                <li><a href="jobs.php">Tech Support</a></li>
                                                <li><a href="jobs.php">Finance Jobs</a></li>
                                                <li><a href="jobs.php">Part time Jobs</a></li>
                                                <li><a href="jobs.php">Health Care</a></li>
                                                <li><a href="jobs.php">Hospitality</a></li>
                                                <li><a href="jobs.php">Internships</a></li>
                                                <li><a href="jobs.php">Research Jobs</a></li>
                                                <li><a href="jobs.php">Defence Jobs</a></li>
                                            </ul>
                                        </div>
                                        <div class="col-sm-6">
                                            <ul class="multi-column-dropdown">
                                                <li><a href="login.php">Recruiter Updates</a></li>
                                                <li><a href="upload.php">Upload Resume</a></li>
                                                <li><a href="codes.php">Shortcodes</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </ul>
                            </li>
                            <li><a href="events.php" class="effect-3">Events</a></li>

                            <li><a href="professional.php" class="effect-3">Professionals</a></li>
                            <li><a href="contact.php" class="effect-3">Contact</a></li>

                            <li  >
                              <a style="margin-top: -5%" href="login.php"> 
                                <button type="submit" onclick="location.href='login.php';" style="float: right;background: #23B684;width: 100%;color: white" class="btn btn-block"> 
                                     <i class="fa fa-user" aria-hidden="true"> </i>   Login</button></a></li>

                        </ul>


                    </nav>
                </div>
                <!--/.navbar-collapse-->
                <!--/.navbar-->
            </div>
        </nav>
    </div>
</div>

Answer 1

通常这应该使用 JQuery 工作:

$('.nav .navbar-nav li a').click(function(){
$(this).addClass("active"); });

您还必须检查事件类发生了什么变化。