在复杂菜单中添加活动类

Question

I saw many questions like mine but I can't write this JS. I have a menu like this and I need to put the class="active" in the <li> tag of the page where the user is. This nav-bar is in a php file that I include in each page of the site. Sorry but after 28h of coding I am fuse!

        <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

I resolved with

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

and 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');
}

}

Answer 2

You can access the path accessed successfully most of the time in PHP by using the global server request URI variable $_SERVER['REQUEST_URI'] .

Simply, you need to compare the value of $_SERVER['REQUEST_URI'] to the target of the links in your navigation, and apply a class if it matches. For example:

<li><a href="/ddt.php" <?php echo $_SERVER['REQUEST_URI'] === '/ddt.php' ? 'class="active"' : '' ?>>DDT</a></li>

As a sidenote, you need not use PHP to generate absolute links for your hrefs in HTML - just use relative paths, eg /listini.php instead of http://<?php echo $base_url ?>/listini.php .

Your life would be much easier if you looked into using a templating language such as Twig , that separates the logic that dictates how a page should be displayed from the actual layout code.

Answer 3

You could use something a simple as this Javascript solution.

window.onload=function(){
var Nav=document.getElementById(window.location.href.split('/').pop().split('.')[0]);
if(Nav){
Nav.setAttribute('class','active');
}}

How does it work?

Elements you wish to add the class to must have an ID matching the page name

Example

From: <a href="http://<?php echo $base_url ?>/fatture.php">Fatture</a>

To: <a id="fatture" href="http://<?php echo $base_url ?>/fatture.php">Fatture</a>

The javascript above will strip down the clients location www.something.com/fatture.php to fatture by splitting the string from / creating an array. The name of the file is last in the array so pop() is used to select the last item in the array leaving you with fatture.php the string is split once again at . creating a new array, the first item in that array is then used in the ID selector "fatture". document.getElementById('fatture')

URL Breakdown

1) window.location.href = www.something.com/fatture.php

2) .split('/') =>

• array[0] = www.something.com
• array[1] = fatture.php

3) .pop() = Last array/array[1] of .split('/') - fatture.php

4) .split('.')[0] = fatture

If you have any questions about the source code above please leave a comment below and I will reply as soon as possible.

I hope this helps. Happy coding!