Question

我想在相应的导航链接上添加一个css类（.active）。

我的导航：

    <nav>
      <ul>
        <a href="index.php"><li id="Thuispagina">Thuispagina</li></a>
        <a href="../airsoft-nieuws"><li id="Nieuws">Nieuws</li></a>
        <a href="../airsoft-evenementen"><li id="Skirms">Skirms</li></a>
        <a href="../airsoft-reserveren"><li id="Reservatie">Reservatie</li></a>
        <a href="../airsoft-fotogalerij"><li id="Fotogalerij">Fotogalerij</li></a>
        <a href="../airsoft-contact"><li id="Contact">Contact</li></a>
        <a href="../airsoft-forum"><li id="Forum">Forum</li></a>
      </ul>
    </nav>

如果我访问以下页面之一：domain.com/airsoft-contact/index.php,domain.com/airsoft-contact/edit.php或domain.com/airsoft-contact/delete.php应将活动类添加到具有id Contact

的li项目

如果我访问以下页面之一：domain.com/airsoft-fotogalerij/index.php,domain.com/airsoft-fotogalerij/edit.php或domain.com/airsoft-fotogalerij/delete.php应该将活动类添加到id为Fotogalerij的li项目

另一方面有一个例外：index.php页面不在任何子图中，所以逻辑应该在那里做例外。

Answer 1

更好或更简单的方法是使用jquery但是你也可以使用条件示例class="<?php if ($_SERVER['PHP_SELF']=="ur script name"){ echo "active";}?>"来使用php或者你可以使用三元运算符来获得更好的视图所以这是一种方式，你可以找到其他人

Answer 2

实现此目的的最简单方法（如果您不是专家用户）是在导航元素中为每个链接添加这样的js

if(window.location.href == "yourlink"){
 document.getElementById("elementid").class = "active";
}

另一种方式可能是：

var links = [ new Link("yoururl1", "yourelement1"), new Link("yoururl2", "yourelement2"), new Link("yoururl3", "yourelement3")];

for(link in links){
  if(link.url == window.location.href){
     document.getElementById(link.elementid).class = "active";
  }
}

function Link (url, elementid){
  this.url = url;
  this.elementid = elementid;
}

基于检索到的url部分的活动类导航项

2 个答案: