javascript - 在复杂菜单中添加事件类

Question

看到很多和我一样的题但是我不会写这个JS。我有一个这样的菜单，我需要把 class="active"在<li>用户所在页面的标签。这个导航栏位于一个 php 文件中，我将其包含在站点的每个页面中。抱歉，但经过 28 小时的编码，我已经崩溃了!

        <div class="componant-section" id="navbars">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2"><span class="fa fa-bars"></span></button>
                <img class="logo" src="http://<?php echo $base_url ?>/images/logos.png" alt="" width="127">
                </div>

                <div class="collapse navbar-collapse" id="navbar-collapse-2">
                    <ul class="nav navbar-nav">
                        <li><a href="http://<?php echo $base_url ?>/home.php">Home</a></li>
                        <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Clienti <span class="fa-chevron-down fa"></span></a>
                        <ul class="dropdown-menu">
                            <div class="arrow top"></div>
                            <li><a href="http://<?php echo $base_url ?>/function/agg_cliente.php">Aggiungi nuovo...</a></li>
                            <li><a href="http://<?php echo $base_url ?>/lista_clienti.php">Lista</a></li>
                        </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Fornitori <span class="fa-chevron-down fa"></span></a>
                            <ul class="dropdown-menu">
                                <div class="arrow top"></div>
                                <li><a href="http://<?php echo $base_url ?>/function/agg_fornitore.php">Aggiungi nuovo...</a></li>
                                <li><a href="http://<?php echo $base_url ?>/lista_fornitori.php">Lista</a></li>
                            </ul>
                        </li>
                        <li><a href="http://<?php echo $base_url ?>/fatture.php">Fatture</a></li>
                        <li><a href="http://<?php echo $base_url ?>/ddt.php">DDT</a></li>
                        <li><a href="http://<?php echo $base_url ?>/preventivi.php">Preventivi</a></li>
                        <li><a href="http://<?php echo $base_url ?>/ndc.php">NDC</a></li>
                        <li><a href="http://<?php echo $base_url ?>/listini.php">Listini</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Controllo <span class="fa-chevron-down fa"></span></a>
                            <ul class="dropdown-menu">
                                <div class="arrow top"></div>
                                <li><a href="http://<?php echo $base_url ?>/check/ck_login.php">Login</a></li>
                                <li><a href="http://<?php echo $base_url ?>/check/ck_causale.php">Causale</a></li>
                                <li><a href="http://<?php echo $base_url ?>/check/ck_mezzo.php">Mezzo Trasporto</a></li>
                                <li><a href="http://<?php echo $base_url ?>/check/ck_iva.php">IVA</a></li>
                                <li><a href="http://<?php echo $base_url ?>/check/ck_imb.php">Imballo</a></li>
                                <li><a href="http://<?php echo $base_url ?>/check/ck_art.php">Articoli</a></li>
                                <li><a href="http://<?php echo $base_url ?>/check/ck_spagg.php">Spese Aggiuntive</a></li>
                                <li><a href="http://<?php echo $base_url ?>/check/ck_pagam.php">Pagamento</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right navbar-icons">
                        <li><a><span class="fa-user fa"></span>
                            <span class="hidden-lg"><?php echo $user; ?></span></a></li>
                        <li><a href="http://<?php echo $base_url ?>/function/logout.php">
                            <span class="fa-cog fa"></span>
                            <span class="hidden-lg">Logout</span>
                            <span class="navbar-new"></span></a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>

Answer 1

我解决了

<div class="componant-section" id="navbars">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container">
                <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2"><span class="fa fa-bars"></span></button>
                <img class="logo" src="http://<?php echo $base_url ?>/images/logos.png" alt="" width="127">
                </div>

                <div class="collapse navbar-collapse" id="navbar-collapse-2">
                    <ul class="nav navbar-nav">
                        <li id="home"><a href="http://<?php echo $base_url ?>/home.php">Home</a></li>
                        <li class="agg_cliente lista_clienti dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Clienti <span class="fa-chevron-down fa"></span></a>
                        <ul class="dropdown-menu">
                            <div class="arrow top"></div>
                            <li id="agg_cliente"><a href="http://<?php echo $base_url ?>/function/agg_cliente.php">Aggiungi nuovo...</a></li>
                            <li id="lista_clienti"><a href="http://<?php echo $base_url ?>/lista_clienti.php">Lista</a></li>
                        </ul>
                        </li>
                        <li class="agg_fornitore lista_fornitori dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Fornitori <span class="fa-chevron-down fa"></span></a>
                            <ul class="dropdown-menu">
                                <div class="arrow top"></div>
                                <li id="agg_fornitore"><a href="http://<?php echo $base_url ?>/function/agg_fornitore.php">Aggiungi nuovo...</a></li>
                                <li id="lista_fornitori"><a href="http://<?php echo $base_url ?>/lista_fornitori.php">Lista</a></li>
                            </ul>
                        </li>
                        <li id="fatture"><a href="http://<?php echo $base_url ?>/fatture.php">Fatture</a></li>
                        <li id="ddt"><a href="http://<?php echo $base_url ?>/ddt.php">DDT</a></li>
                        <li id="preventivi"><a href="http://<?php echo $base_url ?>/preventivi.php">Preventivi</a></li>
                        <li id="ndc"><a href="http://<?php echo $base_url ?>/ndc.php">NDC</a></li>
                        <li id="listini"><a href="http://<?php echo $base_url ?>/listini.php">Listini</a></li>
                        <li class="ck_login ck_causale ck_mezzo ck_iva ck_imb ck_art ck_spagg ck_pagam dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Controllo <span class="fa-chevron-down fa"></span></a>
                            <ul class="dropdown-menu">
                                <div class="arrow top"></div>
                                <li id="ck_login"><a href="http://<?php echo $base_url ?>/check/ck_login.php">Login</a></li>
                                <li id="ck_causale"><a href="http://<?php echo $base_url ?>/check/ck_causale.php">Causale</a></li>
                                <li id="ck_mezzo"><a href="http://<?php echo $base_url ?>/check/ck_mezzo.php">Mezzo Trasporto</a></li>
                                <li id="ck_iva"><a href="http://<?php echo $base_url ?>/check/ck_iva.php">IVA</a></li>
                                <li id="ck_imb"><a href="http://<?php echo $base_url ?>/check/ck_imb.php">Imballo</a></li>
                                <li id="ck_art"><a href="http://<?php echo $base_url ?>/check/ck_art.php">Articoli</a></li>
                                <li id="ck_spagg"><a href="http://<?php echo $base_url ?>/check/ck_spagg.php">Spese Aggiuntive</a></li>
                                <li id="ck_pagam"><a href="http://<?php echo $base_url ?>/check/ck_pagam.php">Pagamento</a></li>
                            </ul>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right navbar-icons">
                        <li><a><span class="fa-user fa"></span>
                            <span class="hidden-lg"><?php echo $user; ?></span></a></li>
                        <li><a href="http://<?php echo $base_url ?>/function/logout.php">
                            <span class="fa-cog fa"></span>
                            <span class="hidden-lg">Logout</span>
                            <span class="navbar-new"></span></a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>

和javascript

window.onload=function(){
var Navid = document.getElementById(window.location.href.split('/').pop().split('.')[0]);

if(Navid){
    Navid.setAttribute('class','active');
    var father = Navid.parentNode,
        grandFather = father.parentNode;
    grandFather.setAttribute('class','active');
}