Changing element ID with javascript_问答_开发者

I am loading in the following navbar html from a required PHP file:

    <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&开发者_如何学Gogt;<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>

Depending on the page that I am on (let's say I am on the alumni.php page) I want that list item to be given the ID "active"?

Edit: Here is my header.php code:

    <!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>

I assume that I need to do this through Javascript once the page loads? How would I do this?

as said in comment, PHP will be a better way.

You can simple doing it like this :

<?php

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

$page = 'about.php';

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

You should assign the ID (which should be a class, semantically speaking, IMHO) using PHP whilst generating the page. Using JS is not only troublesome (you have to go and check your location, probably match a regexp, etc), but also inelegant.

I'd say that in common coding for javascript where you want a particular element to be 'active' or 'highlighted' or 'enabled', make use of the class attribute. Your id attribute implies a static attribute of the data being used.

I think this will do what you want.

<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>

If you were using jQuery this may have been done in a better and lesscode way... but I assume you're not using it.

Hope it helps :)

While it may be possible (I haven't actually tried it), you would not typically change the id of an element in the page. Instead, it would be a better approach to use class="active" instead of id="active".

Also, you probably want to generate the appropriate html for it on the server-side, as you're building the rest of the page. Something like this would work (though there are many different ways to build this code, depending on your server's implementation):

<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>

Note: I've also removed the id="current" attribute from the anchor (<a ...>), because I'm assuming that this would change depending on the current page as well, and it's unnecessary, because you can build CSS selectors to address the anchor, without giving it its own special id or class.

Here's what your CSS might look like:

#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 */
}

hope this helps.

[edit] As I said above, it all depends on the architecture of your php code. But assuming that you have a bunch of php pages (eg: "Home.php", "About.php", "News.php", etc.); and each of those pages includes your nav code using something like: require("nav.php");. Then you can just do the following in each of your main php files:

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

Just be sure that you set $currentPage, in each page's main script, somewhere prior to including your nav code (ie. before you call require(...)). The nav code will then be able to "see" $currentPage and use it.

So, for example, if the above code is executed in a file called "About.php", then $currentPage will be set to "about.php" (filename gets converted to all lowercase by the call to strtolower(...)). Then, when "nav.php" gets included, it will be able to access $currentPage and "see" that we're on the 'about' page.

You can change my example above, as follows, to use values of $currentPage that were generated from the filename using the approach I've described here.

<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>