在复杂菜单中添加 class 个活动
add class active in a complex menu
看到很多和我一样的题,但是我不会写这个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>
可以通过全局服务器请求URI变量$_SERVER['REQUEST_URI']
.
简单地说,您需要将 $_SERVER['REQUEST_URI']
的值与导航中链接的目标进行比较,如果匹配则应用 class。例如:
<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),您的生活会轻松得多,它将指示页面应如何显示的逻辑与实际布局代码分开。
您可以使用像这个 Javascript 解决方案一样简单的方法。
window.onload=function(){
var Nav=document.getElementById(window.location.href.split('/').pop().split('.')[0]);
if(Nav){
Nav.setAttribute('class','active');
}}
它是如何工作的?
您希望添加 class 的元素必须具有与页面名称匹配的 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()
用于 select 数组中的最后一项,留下 fatture.php
字符串在 .
处再次拆分创建一个新数组,然后在 ID select 或 "fatture" 中使用该数组中的第一项。 document.getElementById('fatture')
URL Breakdown
1) window.location.href = www.something.com/fatture.php
2) .split('/') =>
- 数组[0] = www.something.com
- 数组[1] = fatture.php
3) .pop() = .split('/') 的最后 array/array[1] - fatture.php
4) .split('.')[0] = fatture
如对上述源码有任何疑问,请在下方留言,我会尽快回复。
希望对您有所帮助。编码愉快!
我解决了
<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');
}
}