使用javascript更改元素ID

正如评论中所说,PHP将是一种更好的方法。

你可以这样做:

<?php

$header = file_get_content('header.html');

$page = 'about.php';

$header = str_replace('<li><a href="'.$page.'">', '<li id="active"><a href="#">', $header);

在生成页面时,应该使用PHP分配ID(应该是一个类,从语义上讲,是IMHO)。使用JS不仅麻烦(您必须去检查您的位置,可能匹配regexp等),而且不雅。

我要说的是,在javascript的通用编码中,如果您希望某个特定元素是“active”或“highlighted”或“enabled”,可以使用class属性。id属性表示所用数据的静态属性。

<ul id="navlist">
    <li id="home">
       <a href="#" id="current">Home</a>
    </li>
    <li id="about">
       <a href="about.php">About</a>
    </li>
    <li id="news">
       <a href="news.php">News</a>
    </li>
    <li id="applying">
        <a href="applying.php">Applying</a>
    </li>
    <li id="currentResidents">
        <a href="current.php">Current Residents</a>
    </li>
    <li id="alumni">
        <a href="alumni.php">Alumni</a>
    </li>
    <li id="contact">
        <a href="contact.php">Contact</a>
    </li>
</ul>
<script type="text/javascript">
var pagePath = window.location.pathname;
var pageName = pagePath.substring(pagePath.lastIndexOf('/') + 1);
var currentActive;

function setActivePage(page)
{
    if(currentActive)
        document.getElementById(currentActive).removeAttribute("class");
    document.getElementById(page).setAttribute("class", "active");
    currentActive = page;
}

if(pageName == "about.html")
    setActivePage("about");
else if(pageName == "otherpage.html")
    setActivePage("otherpage");
// Etc...
</script>

如果您使用的是jQuery,那么这可能是以一种更好、更轻松的方式完成的。。。但我想你不会用的。

希望有帮助:)

当它 有可能(我实际上还没有尝试过),您通常不会更改页面中某个元素的id。相反,这将是一种更好的使用方法 class="active" 而不是 id="active"

另外,在构建页面的其余部分时,您可能希望在服务器端为它生成适当的html。类似的方法可以工作(尽管根据服务器的实现,有许多不同的方法可以构建此代码):

<ul id="navlist">
    <li class="<?php echo (($currentPage=='Home')?'active':''); ?>"><a href="#">Home</a></li>
    <li class="<?php echo (($currentPage=='About')?'active':''); ?>"><a href="about.php">About</a></li>
    <li class="<?php echo (($currentPage=='News')?'active':''); ?>"><a href="news.php">News</a></li>
    <li class="<?php echo (($currentPage=='Applying')?'active':''); ?>"><a href="applying.php">Applying</a></li>
    <li class="<?php echo (($currentPage=='Residents')?'active':''); ?>"><a href="current.php">Current <br />Residents</a></li>
    <li class="<?php echo (($currentPage=='Alumni')?'active':''); ?>"><a href="alumni.php">Alumni</a></li>
    <li class="<?php echo (($currentPage=='Contact')?'active':''); ?>"><a href="contact.php">Contact</a></li>
</ul>

注意:我还删除了 id="current" <a ...> ),因为我假设这也会随着当前页面的不同而改变,而且这是不必要的,因为您可以构建CSS选择器来寻址锚,而不必为锚赋予它自己的特殊id或类。

下面是您的CSS的外观:

#navlist li.active {
  /* css rules for the active LI */
}
#navlist li.active a {
  /* css rules for the active (a.k.a. "current") anchor inside the active LI */
}

[编辑]如上所述,这完全取决于php代码的体系结构。但是假设您有一堆php页面(例如:“Home.php”、“About.php”、“News.php”等);其中每个页面都包含您使用的nav代码,例如: require("nav.php"); . 然后,您可以在每个主php文件中执行以下操作:

<?php
/* $currentPage, declared here, will be available to php code inside nav.php */
$currentPage = strtolower(basename(__FILE__));
require("nav.php");
?>

require(...) ). 导航代码将能够“看到” $currentPage

因此,例如,如果在名为“About.php”的文件中执行上述代码,那么$currentPage将设置为“About.php”(通过调用 strtolower(...) ). 然后,当包含“nav.php”时,它将能够访问 $当前页 “看”我们在“关于”页面上。

<ul id="navlist">
    <li class="<?php echo (($currentPage=='home.php')?'active':''); ?>"><a href="#">Home</a></li>
    <li class="<?php echo (($currentPage=='about.php')?'active':''); ?>"><a href="about.php">About</a></li>
    <li class="<?php echo (($currentPage=='news.php')?'active':''); ?>"><a href="news.php">News</a></li>
    <li class="<?php echo (($currentPage=='applying.php')?'active':''); ?>"><a href="applying.php">Applying</a></li>
    <li class="<?php echo (($currentPage=='residents.php')?'active':''); ?>"><a href="current.php">Current <br />Residents</a></li>
    <li class="<?php echo (($currentPage=='alumni.php')?'active':''); ?>"><a href="alumni.php">Alumni</a></li>
    <li class="<?php echo (($currentPage=='contact.php')?'active':''); ?>"><a href="contact.php">Contact</a></li>
</ul>