getting a link color to stay activated

**dtrachtman** · 09-23-2012 03:20 PM

I have a page that has two elements. One is navigation, and the other is an iframe where the links in that navigation change the pages. It works fine except I need the background color of the nav item to stay highlighted after its been clicked (and the corresponding page is therefore being viewed). In other words, I just need some simple javascript to say, "on click, change the bground of this link to X and make the others go back to normal". Make sense? Probably not hard, I just don't know javascript.

thanks

**George88** · 09-23-2012 03:35 PM

I'm pretty sure this is a CSS question. However, in JavaScript I think you would need to dynamically change the class of the element in question to achieve this. You can use the window.location.hash object to let JavaScript know which page you're on, and change the class as necessary. I've never actually done this myself, but if I were to try, I'd do something along the lines of:

Page 1:

Code:

<a href="/some_page#item_one">Page</a>

Page 2:

Code:

<script type="text/javascript">
var url = window.location.hash;

if(url == "item_one")
    document.getElementById("your_item").className = "some_class_name";
else if(url == "item_two")
    document.getElementById("your_other_item").className = "some_class_name";

etc., etc.
</script>

There may be a much easier method though. As I said, this is just how I'd do it in JavaScript. I'm certain there's way in CSS to do this...

**dtrachtman** · 09-23-2012 03:49 PM

Thanks for the advice. I dont think this would be CSS related because its an if/then type of situation. I think I made this more complicated than necessary by even mentioning the iframe.

What about a list of links. When one is clicked, make its bground white and turn off all the other link backgrounds. I think that would be all I need.

**George88** · 09-23-2012 03:59 PM

I'm sorry, I didn't read your first post carefully enough. What you're saying is that you have a single page with navigation, and that navigation is affecting the contents of the iframe? In that case, it's easy.

Code:

<div>
    <ol>
        <li id="page_one">One</li>
        <li id="page_two">Two</li>
        <li id="page_three">Three</li>
    </ol>
</div>

Code:

<script type="text/javascript">

document.getElementById("page_one").addEventListener("click", change_page, false);
document.getElementById("page_two").addEventListener("click", change_page, false);
document.getElementById("page_three").addEventListener("click", change_page, false);

function change_page(event)
{
    var get_button = (event.target || event.srcElement).id;
    
    get_button.className = "class_of_your_choice";
}
</script>

All you need to do is create the class in CSS for the "active" link. I'm pretty sure this should work, but I haven't got time to test it right now. Let me know.

**dtrachtman** · 09-23-2012 04:22 PM

For some reason I can't get that to work. Sorry, I am prob missing something obvious. Here is the page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">

document.getElementById("page_one").addEventListener("click", change_page, false);
document.getElementById("page_two").addEventListener("click", change_page, false);
document.getElementById("page_three").addEventListener("click", change_page, false);

function change_page(event)
{
var get_button = (event.target || event.srcElement).id;

get_button.className = "class_of_your_choice";
}
</script>

<style type="text/css">
ul{
margin: 0;
padding: 0;
list-style-type: none;
}

li { margin: 0 0 .2em 0; }

a {
display: block;
color: #FFF;
padding: .2em .8em;
text-decoration: none;
}

a:hover
{
background-color: #fff;
color: #417f29;
font-weight:400;
}
</style>

</head>

<body>
<div style="width:200px; background-color:#093; float:left;">
<ul>
<li><a href="test1.htm" target="window" id="page_one">link one</a></li>
<li><a href="test2.htm" target="window" id="page_two">link two</a></li>
</ul>
</div>

<iframe id="window" name="window" style="width:400px; height:400px;" src="test1.htm">
</iframe>

</body>
</html>

**George88** · 09-24-2012 11:34 AM

Okay, at the risk of being rude it appears you didn't really know what to do with the sample code I provided. I wasn't attempting to give you fully functional code, just a nudge in the right direction. Anyway, I've taken the liberty of writing what I think it is you want, and I've uploaded it to my website so you can download it at your leisure.

1. index.html
2. default.html
3. page_one.html
4. page_two.html
5. page_three.html

View the demo here: http://sitesupplier.co.uk/tutorial_d...es/dtrachtman/

The index file is where all the code is written, but I'm not going to paste in the code to webdeveloper.com because the new code presentation sucks. You can view the source of the file I linked you to and copy & paste the code from there.

**dtrachtman** · 09-24-2012 07:10 PM

you nailed it! Thanks!

**xelawho** · 09-24-2012 08:50 PM

does 3 completely different things on Chrome 21, FF 15 and IE8...

**George88** · 09-25-2012 04:13 AM

Originally Posted by xelawho

does 3 completely different things on Chrome 21, FF 15 and IE8...

Oh, sorry. I didn't test it in all browsers for some reason. Anyway, the problem is just that the other browsers don't accept the ID attribute as a valid target, it must be a name attribute instead. The iframe wasn't given a name, but I've updated it now so the example is in working order.

Thread: getting a link color to stay activated

Thread Tools

Display

getting a link color to stay activated

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions