Edit an include file with javascript

Question

I want to have a standard menu on on the pages on my website. I'm using an include file as shown below:

<div class="header box">
<ul class="nav box">
<li class="current" id="home"><a href="index.php" onclick="current('home')">Home</a></li>
<li class="" id="onlineSchedule"><a href="onlineSchedule.php" onclick="current(this)">Online Schedule</a></li>
<li class="" id="partners"><a href="partners.php" onclick="current(this)">Partners/Centers</a></li>
<li class="" id="services"><a href="services.php" onclick="current(this)">Services</a></li>
<li class="" id="products"><a href="products.php" onclick="current(this)">Products</a></li>
<li class="" id="newsHighlights"><a href="newsHighlights.php" onclick="current(this)">News/Highlights</a></li>
<li class="" id="signup"><a href="signup.php" onclick="current(this)">Sign Up!</a></li>
<li class="" id="feedback"><a href="feedback.php" onclick="current(this)">Feedback</a></li>
</ul>

But I want the class to change whenever I click a different page as the "current" class highlights the link in the menu. How do I do this? I tried Javascript as shwon below but it doesn't work... thnx in advance

function current(page)
{
    //alert(page);
    document.getElementById("home").setAttribute("class", "");
    document.getElementById("onlineSchedule").setAttribute("class", "");
    document.getElementById("partners").setAttribute("class", "");
    document.getElementById("services").setAttribute("class", "");
    document.getElementById("products").setAttribute("class", "");
    document.getElementById("newsHighlights").setAttribute("class", "");
    document.getElementById("signup").setAttribute("class", "");
    document.getElementById("feedback").setAttribute("class", "");

    document.getElementById(page).className += "current";
    var temp = document.getElementById("home").getAttribute("class");
    alert(temp);
}

Have you tried using className? document.getElementById("home").className += "clicked"; — scusyxx
– scusyxx, Commented Oct 9, 2012 at 3:08
The javascript part doesn't look complete. You've made the function, but the function didn't run. Could you include more parts of your javascript? — VKen
– VKen, Commented Oct 9, 2012 at 3:13

Rhyono · Accepted Answer · 2012-10-09 03:21:54Z

1

Here's an example of working code:

<style type="text/css">
.current {
    color: red;
}
.current a {
    color: green;
}
</style>
<div class="header box">
<ul class="nav box">
<li class="current" id="home"><a href="index.php" onclick="current('home')">Home</a></li>
<li class="" id="onlineSchedule"><a href="onlineSchedule.php" onclick="current(this)">Online Schedule</a></li>
<li class="" id="partners"><a href="partners.php" onclick="current(this)">Partners/Centers</a></li>
<li class="" id="services"><a href="services.php" onclick="current(this)">Services</a></li>
<li class="" id="products"><a href="products.php" onclick="current(this)">Products</a></li>
<li class="" id="newsHighlights"><a href="newsHighlights.php" onclick="current(this)">News/Highlights</a></li>
<li class="" id="signup"><a href="signup.php" onclick="current(this)">Sign Up!</a></li>
<li class="" id="feedback"><a href="feedback.php" onclick="current(this)">Feedback</a></li>
</ul>
<script type="text/javascript">
function current(page)
{
    document.getElementById("home").setAttribute("class", "");
    document.getElementById("onlineSchedule").setAttribute("class", "");
    document.getElementById("partners").setAttribute("class", "");
    document.getElementById("services").setAttribute("class", "");
    document.getElementById("products").setAttribute("class", "");
    document.getElementById("newsHighlights").setAttribute("class", "");
    document.getElementById("signup").setAttribute("class", "");
    document.getElementById("feedback").setAttribute("class", "");

    document.getElementById(page).className = "current";
}

current("home");
</script>

I'm assuming you wanted to format the link as well, so I showed how to by adding in .current a { } which is where you'll put CSS for the current link. .current { } will mostly only affect the list item.

answered Oct 9, 2012 at 3:21

Rhyono

2,4782 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1703514 Over a year ago

its not working.. the css formatting for the current class is not appearing... pls kno that the links are in a php file called topLinks.php and im including it in all my files... like so: <?php include 'topLinks.php'; ?> shud i put the java script in the topLinks.php file or in the webpage file? ive tried both, they dont work.. and ive tested to see if the class has changed.. if you notice the alert function... it returns that the class has changed to current... but the formatting doesnt appear.. :(

Rhyono Over a year ago

Add your current CSS for that class to your post. The JavaScript needs to come after the links or be executed onload of the body.

Collectives™ on Stack Overflow

Edit an include file with javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related