活动菜单 - 将类"active"归因于其自己页面中的链接

Question

我想添加一个活动菜单女巫将类"活动"归因于它自己页面中的链接。

该代码位于名为"header.php"的单独文件中。

我已经尝试了很多方法和脚本代码，但无法使其工作，所以我正在寻求帮助。

我对菜单的代码如下：

<div class="wrapper row1">
<header id="header" class="hoc clear"> 
<div id="rl1" class="fl_left">
<h1><a href="/"><img src="images/logo"></a></h1>
</div>
<div class="topnav" id="myTopnav">
<a href="/" class="active">Início</a>
<a href="sobre_nos.php">Sobre Nós</a> 
<a href="servicos.php">Serviços</a>
<a href="contactos.php">Contactos</a>
<a href="#"><i class="fa fa-facebook-f"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</header>

Answer 1

在每个文件(包括标头(的顶部定义$page变量.php现在签入该页面的标头.php。 请考虑以下示例进行sobre_nos.php。对每个页面执行此操作。

标头.php

<div class="wrapper row1">
<header id="header" class="hoc clear"> 
<div id="rl1" class="fl_left">
<h1><a href="/"><img src="images/logo"></a></h1>
</div>
<div class="topnav" id="myTopnav">
<a href="/" class="active">Início</a>
<a href="sobre_nos.php" <?= ($page === 'sobre_nos')?'class="active"' : '';?>>Sobre Nós</a> 
<a href="servicos.php">Serviços</a>
<a href="contactos.php">Contactos</a>
<a href="#"></i></a>
<a href="#"></i></a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</header>

sobre_nos.php

$page = 'sobre_nos'; 
<?php include 'header.php'; ?>
.....Your content

Answer 2

您想突出显示所选链接吗？

添加以下脚本。这会将单击的项目包装到具有预选类的范围中。 我已经修改了它以适应您的HTML.

$(document).on('click', '.topnav a', function(e) {
$('.topnav .menuselect a').unwrap(  )
$(this).wrap("<span class='menuselect'></span>");
});

Answer 3

假设你有一个$var变量。

<nav>
<a href="contactos.php" class="<?php echo ($var == "contact" ? "active" : "")?>">Contactos</a>
</nav>

Answer 4

<a href="/" class="getClass('/')">Início</a>
<a href="sobre_nos.php" class="getClass('sobre_nos.php')">Sobre Nós</a> 
<a href="servicos.php" class="getClass(..)">Serviços</a>
<a href="contactos.php" class="getClass(..)">Contactos</a>

实现 getClass ：

function getClass(path){
if(path == window.location.href.split('/').pop()){
return "active";
}
return "";
}