Javascript 在复杂菜单中添加活动类

我看到很多像我这样的问题，但我不会写这个。 我有一个这样的菜单，我需要将

class=“active”

放在用户所在页面的

标记中。这个导航栏位于一个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>

/图像/徽标.png“alt=”“width=“127”>

您可以使用全局服务器请求URI变量

$\u server['request\u URI']

在PHP中大部分时间访问成功访问的路径

简单地说，您需要将

$\u SERVER['REQUEST\u URI']

的值与导航中链接的目标进行比较，如果匹配，则应用一个类。例如：

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

作为旁注，您不需要使用PHP为HTML中的HREF生成绝对链接-只需使用相对路径，例如

/listini.PHP

而不是

http:///listini.php

---

如果您考虑使用一种模板语言，例如，它将指示页面应如何显示的逻辑与实际布局代码分离开来，那么您的生活就会轻松得多。

您可以使用一种简单的Javascript解决方案

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

它是如何工作的？

要将类添加到的元素必须具有与页面名称匹配的ID

范例

发件人：

收件人：

上面的javascript将通过从创建数组的

/

中拆分字符串，将客户端位置

www.something.com/fature.php

拆分为

fature

。文件名是数组中的最后一个，因此

pop（）

用于选择数组中留给您的最后一项

fature.php

字符串在

处再次拆分创建新数组，然后在ID选择器“fature”中使用该数组中的第一项。

document.getElementById（'fature'）

URL细分

1）window.location.href=www.something.com/fature.php

2）.split（'/'）=>

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

3）.pop（）=最后一个数组/array[1]of.split（'/'）-fature.php

4）.split（'.'）[0]=肥肉

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

我希望这能有所帮助。祝您编码愉快！

我决定

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

---

}

你想在什么中添加

class=“active”

？锚定标签

@NewToJS抱歉，在意大利，我写的时候是凌晨2点；pI使用相对路径，但在某些情况下（如check dir或functions dir中的页面）服务器找不到任何东西是的，我在其他问题中看到了这一点，但我没有使用它，因为如果它将类置于活动状态，例如，在
Controllo
下的
Login
，它会将类置于页面中，而不是“父级”中“.对不起，我的英语不好：/你不需要把它作为一个答案重新发布，你只需要把它标记为：p，这样你就可以知道将来：Doh-ok对不起，我重新发布了它，即使是nav-modified，但还可以。”
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');
}