Change a CSS Selector Using Javascript 1

[smichener]

For a website I am trying to create I would like to utilize Javascript to save some duplication of work. I have an include file (siteNav.html) that contains the main website navigation tabs and would like the "active" tab to display as bold. I'm not sure how to accomplish this since I'm a Javascript newbie, but I'm looking for smething much simpler than the examples I've been coming across. Any help would be appreciated.

To begin I just want to manually identify the current page within the html; in the example of home.html it could be by adding something like the following near the top of the page...
var thisPage = home;

Then in siteNav.html (the page to be included) I would like something that would look for the variable "thisPage" and add "Active" to the end of class="tab" if the variable equals home so it would become class="tabActive".

Here's how that part looks in straight Java code.....

class="tab<%= strThisPage.equals("home") ? "Active" : "" %>">Home</a>

The above Java code basically says -- make the class "tabActive" for the home tab if the var at the top of the page equals "home", or else leave it as is (class="tab").

I need to do this in Javascript.

Thanks for any assistance and my apologies if this has been addressed in another thread.

 

[kaht]

You'll want to use className

document.getElementById("idOfElement").[COLOR=red][b]className[/b][/color] = (someCondition) ? "tabActive" : "tab";

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

 

[smichener]

Thank you Kaht, I'll give that a try.

Steve

 

[smichener]

I've tried something very simple and almost have it working. Here's what I've got so far.

At the top of the page:

<style type="text/css">
.tab
{
color: black;
}
.tabActive
{
color: red;
}
</style>
<script language="JavaScript">
var navMain = home;
</script>

Within the body as a test:
<td height="39" class="(navMain == home) ? tab : tabActive">test</td>

The word test displays red (tabActive). So it looks like I've done something incorrect when it comes to (navMain == home) since it's not recognizing that part.

Can someone get me over this last hump. Thanks in advance.

 

[trollacious]

Why are you using Javascript programming in something that isn't an event handler? You should change the class in a <script> area, like kaht showed.

Lee

 

[smichener]

Because I don't know what I'm doing. I think they need a user level below (technical user) in my case.

I didn't really understand Kaht's example. Where she has className in red she's not referring to the css class I assume. And I don't know what to do with (some condition). And I'm not sure how to integrate that bit of code into a <td> or <li> or <a> tag for example. Where do you put it?

Looks like step one for me needs to be a javascript tutorial. Thanks for the feedback nonetheless guys.

 

[kaht]

she has been a man all her life

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

 

[trollacious]

Must be your hairstyle, kaht. #

Lee

 

[kaht]

My long hair was from my college days, it's been cut off for at least 5 years now.

I'm holding the guitar

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.