在复杂菜单中添加活动类答案

【问题标题】：add class active in a complex menu在复杂菜单中添加活动类
【发布时间】：2016-06-24 15:22:29
【问题描述】：

我看到很多类似我的问题，但我不会写这个 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>

【问题讨论】：

您想将class="active" 添加到什么？锚标记 <a href= 或列表项 <li> ？您能否更新您的问题并更具体一点，谢谢。
@NewToJS 对不起，在意大利，我写的时候是凌晨 2 点；p

标签： javascript php menu nav

【解决方案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');
}

}

【讨论】：

您不需要重新发布它作为答案，您只需要标记它：p 让您知道未来：D
哦，好吧，对不起，我重新发布了它，即使是修改了导航但没关系。 ;)

【解决方案2】：

您可以使用像这个 Javascript 解决方案这样简单的东西。

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

它是如何工作的？

您希望添加类的元素必须具有与页面名称匹配的 ID

例子

发件人：<a href="http://<?php echo $base_url ?>/fatture.php">Fatture</a>

收件人：<a id="fatture" href="http://<?php echo $base_url ?>/fatture.php">Fatture</a>

上面的 javascript 将通过将字符串从 / 拆分创建一个数组，将客户端位置 www.something.com/fatture.php 剥离到 fatture。文件的名称是数组中的最后一个，所以pop() 用于选择数组中的最后一项，留下fatture.php 字符串在. 再次拆分创建一个新数组，其中的第一项然后在 ID 选择器“fatture”中使用数组。 document.getElementById('fatture')

网址细分

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

2) .split('/') =>

数组[0] = www.something.com
数组[1] = fatture.php

3) .pop() = .split('/') 的最后一个数组/数组[1] - fatture.php

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

如果您对上面的源代码有任何疑问，请在下方留言，我会尽快回复。

我希望这会有所帮助。快乐编码！

【讨论】：

是的，我在其他问题中看到了这一点，但我没有使用，因为如果它使课程处于活动状态，例如，Login 在Controllo 下，它会将课程放在页面中但不在“父母”中。对不起我的英语不好：/

【解决方案3】：

您可以通过使用全局服务器请求URI变量$_SERVER['REQUEST_URI']来访问PHP中大部分时间成功访问的路径。

简单地说，您需要将$_SERVER['REQUEST_URI'] 的值与导航中链接的目标进行比较，如果匹配则应用一个类。例如：

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

作为旁注，您无需使用 PHP 为 HTML 中的 href 生成绝对链接 - 只需使用相对路径，例如/listini.php 而不是 http://<?php echo $base_url ?>/listini.php。

如果您研究使用模板语言（例如 Twig），您的生活会轻松得多，它将指示页面应如何显示的逻辑与实际布局代码分开。

【讨论】：

我使用了相对路径，但在某些情况下（例如检查目录或函数目录中的页面）服务器找不到任何东西