logo标签列表

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

javascriptphpmenunav
4

我看到很多和我的问题类似的问题，但我不会写这个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
@NewToJS 抱歉，在我写这句话的时候，意大利已经是凌晨2点了；p - RickyLeRoi
3个回答
2
我用以下方法解决了问题：
<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');
}

}

你不需要将其重新发布为答案，只需将其标记即可。这是为了让你知道以后的情况。 - NewToJS
哦，好的，抱歉，我重新发布了它，即使是为了修改导航也可以。;) - RickyLeRoi
1
您可以通过使用全局服务器请求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这样的模板语言，将会使您的生活更加轻松，因为它可以将决定页面显示方式的逻辑与实际布局代码分离。
1
我使用了相对路径，但在某些情况下（例如在检查目录或函数目录中的页面），服务器找不到任何内容。 - RickyLeRoi
0
您可以使用这个简单的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，文件名在数组中最后，因此使用pop()选择数组中的最后一项，留下fatture.php，然后再次在.处拆分字符串创建一个新数组，该数组中的第一项随后用于ID选择器"fatture"。document.getElementById('fatture')

URL分解

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

2) .split('/') =>

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

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

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

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

希望这能帮到您。祝编程愉快！

是的，我在其他问题中看到过这个，但我没有使用它，因为如果将活动类放在例如Controllo下面的Login中，它会将类放在页面中，但不会放在“父级”中。对不起我的英语不好 :/ - RickyLeRoi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接