我看到了许多类似我的问题,但我无法编写此JS。
我有一个像这样的菜单,我需要将class="active"
放在用户所在页面的<li>
标记中。该导航栏位于一个PHP文件中,该文件包含在网站的每个页面中。抱歉,编码28小时后,我很 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>
最佳答案
您可以使用一些简单的Java脚本解决方案。
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选择器“功能”。 document.getElementById('fatture')
1) window.location.href = www.something.com/fatture.php
2) .split('/')=>
3) .pop()= .split('/')的最后一个数组/ array [1]-fatture.php
4) .split('。')[0] =错误
如果您对上面的源代码有任何疑问,请在下面发表评论,我将尽快答复。
我希望这有帮助。祝您编码愉快!