活动菜单-将“活动”类分配给其自己页面中的链接

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

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

添加以下脚本。 这会将单击的项目包装到具有预选类别的范围中。 我已对其进行修改以适合您的HTML 。

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

Answer 2

假设您有一个$var变量。

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

Answer 3

<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 "";
}

Answer 4

在每个文件标题（包括header.php）的顶部定义$ page变量，然后检入该页面的header.php。 考虑下面的sobre_nos.php示例。 对每个页面执行此操作。

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" <?= ($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