Question

我从所需的PHP文件加载以下navbar html：

    <ul id="navlist">
        <li id="active"><a href="#" id="current">Home</a></li>
        <li><a href="about.php">About</a></li>
        <li><a href="news.php">News</a></li>
        <li><a href="applying.php">Applying</a></li>
        <li><a href="current.php">Current <br />Residents</a></li>
        <li><a href="alumni.php">Alumni</a></li>
        <li><a href="contact.php">Contact</a></li>
        </ul>

取决于我所在的页面（假设我在alumni.php页面上）我希望该列表项被赋予“活动”ID？

编辑：这是我的header.php代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" charset="utf-8"/>
    <link rel="stylesheet" href="styles/navbar.css" type="text/css" media="screen" charset="utf-8"/>
    <title>some title</title>
</head>
<body>
    <div id="header">
        <div id="left">
            <img src="images/tree.png" alt="tree" width="87" height="98"></img>
        </div>
        <div id="right">
            <
        </div>
    </div>  
        <div id="navigation">
            <ul id="navlist">
            <li><a href="index.php" id="current">Home</a></li>
            <li><a href="about.php">About</a></li>
            <li><a href="news.php">News</a></li>
            <li><a href="applying.php">Applying</a></li>
            <li><a href="current.php">Current <br />Residents</a></li>
            <li><a href="alumni.php">Alumni</a></li>
            <li><a href="contact.php">Contact</a></li>
            </ul>
        </div>

我认为一旦页面加载，我需要通过Javascript执行此操作？我该怎么做？

Answer 1

如评论中所述，PHP将是一种更好的方式。

你可以这么简单地做到这一点：

<?php

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

$page = 'about.php';

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

Answer 2

您应该在生成页面时使用PHP分配ID（在语义上应该是类，恕我直言）。使用JS不仅麻烦（你必须去检查你的位置，可能匹配正则表达式等），但也不够优雅。

Answer 3

我会说，在javascript的常见编码中，您希望特定元素为“活动”或“突出显示”或“启用”，请使用class属性。您的id属性表示正在使用的数据的静态属性。

Answer 4

我认为这会做你想要的。

<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，这可能是以更好的代码方式完成的......但我认为您没有使用它。

希望有所帮助：）

Answer 5

虽然可能可能（我还没有尝试过），但通常不会更改页面中元素的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”等）;并且每个页面都包含使用以下内容的导航代码：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。然后导航代码将能够“看到”$currentPage并使用它。

因此，例如，如果上述代码在名为“About.php”的文件中执行，则$ currentPage将设置为“about.php”（通过调用{{1}将文件名转换为全部小写}}）。然后，当包含“nav.php”时，它将能够访问strtolower(...)并“看到”我们在“关于”页面上。

您可以更改上面的示例，如下所示，使用我在此处描述的方法使用从文件名生成的$ currentPage值。

$currentPage

使用javascript更改元素ID

5 个答案: