活動菜單-將“活動”類分配給其自己頁面中的鏈接

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