使用JavaScript更改PHP包含的文件的CSS

Question

我最近做了一个网站，我有一个导航栏，它包含在使用PHP的页面。

<?php include "Assets/Inclusions/NavigationBar.php" ?>

我希望活动页面列表项具有粗体文本，因此我使用JavaScript获取当前路径，并使用大量if语句将相关元素加粗。

<script>
if(location.pathname == 'location.php')
document.getElementById("location").style.fontWeight="800";
    } ...and so on
</script>

有更好的方法我应该这样做吗?

Answer 1

这似乎是应该在服务器端完成的事情。如果我犯了语法错误，请随时纠正，因为我写PHP已经有一段时间了，但这里是它的要点:

NavigationBar.php

<?php
    function isActive($page){
      $currentPage = $_GET['page']; // mypage.com?page='something'
      if ( !isset($currentPage) ) $currentPage = 'home';
      return $currentPage == $path;
    }
?>
<ul class="navigation">
  <li><a href="?page=home" 
          <?php if ( isActive('home') ) echo('class="active"'); ?> >Home</a></li>
  <li><a href="?page=About" 
          <?php if ( isActive('about') ) echo('class="active"'); ?>>About Us<a/></li>
</ul>

style.css

a.active{
    font-weight: 800;
}

Answer 2

您可以使用for循环，获取导航中的所有link元素，然后将路径与href进行比较。

var path = window.location.pathname;
var links = document.getElementsByClassName("navlink");
for(var i=0; i<links.length; i++){
   if(links[i].getAttribute("href")==path){
      links[i].style.fontWeight = "800";
      break;
   }
}

显然，你必须根据你的情况做正确的比较，但这比写一堆if更容易，也更容易维护，因为你不必硬编码要测试的位置。

如果你不担心与旧浏览器的兼容性，或者使用jQuery，你可以使用属性选择器与document.querySelector或jQuery

//With querySelector
var link = document.querySelector("a[href='"+path+"']");
if(link!==null){
   link.style.fontWeight=="800";
}
//with jQuery
$("a[href='"+path+"']").css("font-weight","800");