Adding a class to a link based on page location

**dog** · 09-12-2007, 09:03 PM

Hi everyone,

I'm pretty new to ASP and have recently started using the #include jazz. It's pretty useful.

Just now I replaced a submenu that appeared on three pages with:

Code:

#include file="../includes/submenu-ins.asp"

Submenu-ins.asp looks like this:

HTML Code:

<div id="submenu">
  <ul>
    <li><a href="../institucional/default.asp" title="A Home Care Medical">A Home Care Medical</a></li>
    <li><a href="../institucional/historia.asp" title="História">História</a></li>
    <li><a href="../institucional/tecnologia.asp" title="Tecnologia">Tecnologia</a></li>
  </ul>
</div>

The only drawback is that previously I had given a class, called 'selected' to the link of the page being viewed.

i.e. On 'default.asp' the link to 'default.asp' had the class 'selected', like this:

HTML Code:

<div id="submenu">
  <ul>
    <li><a class="selected" href="../institucional/default.asp" title="A Home Care Medical">A Home Care Medical</a></li>
    <li><a href="../institucional/historia.asp" title="História">História</a></li>
    <li><a href="../institucional/tecnologia.asp" title="Tecnologia">Tecnologia</a></li>
  </ul>
</div>

...on 'historia.asp' the historia link had the class 'selected' and on 'tecnologia.asp' the tecnologia link had the class 'selected'.

Does anyone know how I could use the include jazz and still use this system of giving a certain class to the selected links?

Thanks,

Dog

**dog** · 09-25-2007, 04:08 PM

Hello again,

I think I over-complicated my problem a little in the previous post so I'm gonna re-explain from scratch.

I'm using an ASP include to call the HTML for the menu onto my pages. Once this HTML has arrived I'd like to add a class (or the CSS directly) to one of the links in the menu. I want this to happen on all pages and the CSS to be added to whichever link relates to the page that is being viewed.

Make sense?

I think it might be possible with Javascript but I'm open to any suggestions.

Tech_Support mentioned in another thread that I mistakenly started about this same problem that -- it should be possible with ifs and elses.

I'll see what I can come up with. If anyone else has any ideas all help is appricated.

Peace,
dog

**dog** · 10-16-2007, 06:04 PM

I've come up with a javascript solusion to this problem now.

Code:

function selectLink(elementName) {
	
	obj = document.getElementById(elementName);
	obj.className = "selected"; 
}

HTML Code:

<body onload="selectLink('blaa')">

Pretty simple code. In the body of each page I let the javascript know which link should be selected and it does the rest.

The only thing is that now I have to give all the links IDs so that I can identify them...

HTML Code:

<div id="submenu">
  <ul>
    <li><a id="blaa" href="../institucional/default.asp" title="A Home Care Medical">A Home Care Medical</a></li>
    <li><a id="sloniko"  href="../institucional/historia.asp" title="História">História</a></li>
    <li><a id="gabajujufet" href="../institucional/tecnologia.asp" title="Tecnologia">Tecnologia</a></li>
  </ul>
</div>

...and I have to write the onload trigger on each page.

Aside from this it seems all good to me.

Let me know, anyone, if I'm commiting any mistakes or you know of a more automatic way of identifying the links to save me having to write IDs for all the links and specify a lot of different onload triggers on all the pages.

Peace out,
Dog

Thread: Adding a class to a link based on page location

Thread Tools

Search Thread

Adding a class to a link based on page location

Onto Level 2

Bookmarks

Bookmarks

Posting Permissions