Javascript function to switch Classes???

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 456,541 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,276 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 2682 | Replies: 4

•

Join Date: Nov 2006

Posts: 3

Reputation: Robbins is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

Robbins

Offline

Newbie Poster

Javascript function to switch Classes???

Oct 11th, 2007

So basically, I am wondering whats wrong here.... I have 4 links inside table cells and each has a class assigned. the tab that is active is assigned "sel" while the others are "nav" ... what i'm trying to do is have them switch classes without changing the page using javascript. I did some ugly code below since i don't completely know javascript. Each link is currently linked to activate(id) where id is like link1 for one, link2 for another, depending on their ID.

What i want to happen is if Link1's tab is selected, and they click link2's tab, i want link 1's tab to become unselected and back to nav class and link2's tab selected and on the sel class. i tried below but somethings wrong, can someone find my error and/or make not-****ty code that will work for this? thx.

EDIT: heres the code each link has below, except link1 is replaced with link2 and so-on and so-forth. below it is my updated code. It still doesn't work. see any bugs?

the links code

Help with Code Tags

(Toggle Plain Text)

<td width="25%" class="sel" onclick="activate('link1')" style="cursor:pointer" id="link1"><div align="center" class="style20 style18"><strong>Home</strong></div></td>

the function

Help with Code Tags

(Toggle Plain Text)

<script type="text/javascript">
function activate(link){

    
        if(link=='link1') {
    document.link1.className = 'sel';
    document.link2.className = 'nav';
    document.link3.className = 'nav';
    document.link4.className = 'nav';
    }
    
    
        if(link=='link2') {
        
    document.link1.className = 'nav';
    document.link2.className = 'sel';
    document.link3.className = 'nav';
    document.link4.className = 'nav';
    }
    
    }
</script>

Robbins
Undug Net Programming Community
www.undug.net || undugprogramming.com

•

Join Date: Jul 2007

Posts: 2

Reputation: melles is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

melles

Offline

Newbie Poster

Re: Javascript function to switch Classes???

Nov 4th, 2007

You've probably had a solution by now but this works:

The function:
<code>
function activate(obj){
links = document.getElementById('navigator').getElementsByTagName('td');
for(i=0;i<links.length;i++){
links[i].className = 'nav';
if(links[i].id==obj){
links[i].className='sel';
}
}
}
</code>

The table:
<code>
<table id="navigator">
<tr><td id="link1" class="sel" onclick="activate(this.id)">Link1</td><td id="link2" class="nav" onclick="activate(this.id)">Link2</td><td id="link3" class="nav" onclick="activate(this.id)">Link3</td><td id="link4" class="nav" onclick="activate(this.id)">Link4</td></tr>
</table>
</code>

If this doesn't work with your div within the cell then I suspect that the onclick is not bubbling up from the div to the cell.

•

Join Date: Jun 2006

Location: India

Posts: 7,012

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 25

Solved Threads: 368

~s.o.s~

Offline

Lazy, Useless & Apathetic

Re: Javascript function to switch Classes???

Nov 5th, 2007

> document.link1.className = 'sel'; The way you are using to access the link element is incorrect. The document object doesn't have a property named 'link1', it has a link element having an id of 'link1'. The correct way of doing things would be:

Help with Code Tags

(Toggle Plain Text)

var e = document.getElementById('link1');
e.className = 'sel';

A slightly better(definitely not the best!) way of doing it would be:

Help with Code Tags

(Toggle Plain Text)

<script type="text/javascript">
function activate(link)
{
  var e = document.getElementById(link);
  var e3 = document.getElementById(link3);
  var e4 = document.getElementById(link4);

  if(!e || !e3 || !e4)
    return;
  if(link == 'link1')
  {
    e.className = 'sel';
    e.className = 'nav';
   }
   else if(link == 'link2')
   { 
     e.className = 'sel';
     e.className = 'nav';
   }
   
    e3.className = e4.className = 'nav';
}
</script>

I don't accept change. I don't deserve to live.

Happiness corrupts people.

Failing to value the lives of others cheapens your own.

•

Join Date: Jul 2006

Location: Deptford, London

Posts: 971

Reputation: MattEvans has a spectacular aura about

Rep Power: 5

Solved Threads: 48

MattEvans

Offline

Posting Shark

Re: Javascript function to switch Classes???

Nov 7th, 2007

•

Originally Posted by ~s.o.s~

A slightly better(definitely not the best!) way of doing it would be:
....

Definately not the best... What's the reason for assigning different classnames twice in sequence on the same object? Where do the variables link3 and link4 come from? Simple mistakes though.. I can see what you meant to put, although that's not all that helpful to a beginner in the language... On the other hand.. finding mistakes can lead to better understanding, I suppose =P.

Assuming that this is going towards each of the links only being 'active' at one time, and continuing for all 4 links:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<script type="text/javascript">
function activate( link )
{
  var e1 = document.getElementById( 'link1' );
  var e2 = document.getElementById( 'link2' );
  var e3 = document.getElementById( 'link3' );
  var e4 = document.getElementById( 'link4' );
  e1.className = e2.className = e3.className = e4.className = "nav";
  var the_selection = document.getElementById( link );
  the_selection.className = "sel";
}
</script>
<script type="text/javascript">
function activate( link )
{
  var e1 = document.getElementById( 'link1' );
  var e2 = document.getElementById( 'link2' );
  var e3 = document.getElementById( 'link3' );
  var e4 = document.getElementById( 'link4' );
  e1.className = e2.className = e3.className = e4.className = "nav";
  var the_selection = document.getElementById( link );
  the_selection.className = "sel";
}
</script>

Code posted by melles does the equiv, although, as a side effect it will switch all 'td's in the document to be of class 'nav', which isn't necessarily desired..

Or.. if wanting to remove obvious multiple redundancies in either melles' code, or the one I just put:

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<script type="text/javascript">
var last_link = null;
function activate( link )
{
  if( last_link != null ) last_link.className = "nav";
  var the_selection = document.getElementById( link );
  the_selection.className = "sel";
  last_link = the_selection;
}
</script>
<script type="text/javascript">
var last_link = null;
function activate( link )
{
  if( last_link != null ) last_link.className = "nav";
  var the_selection = document.getElementById( link );
  the_selection.className = "sel";
  last_link = the_selection;
}
</script>

or some other orchestration.. the second relies on a global; which means that the function only works for one group of links per document.. could fix that easily with a hash of the currently selected item against some group-unique key, or some other way; have a group-specific object that stores the state, use a 'stick on property' on a common parent, etc... or just copy the function and rename the global.. up to you really.

sorry Robbins, you'll need "****ty code" as you put it, you can't have persistant, controllable, interaction dependant changes of page state without using some kind of "code".

Plato forgot the nullahedron..

•

Join Date: Jun 2006

Location: India

Posts: 7,012

Reputation: ~s.o.s~ is a splendid one to behold

Rep Power: 25

Solved Threads: 368

~s.o.s~

Offline

Lazy, Useless & Apathetic

Re: Javascript function to switch Classes???

Nov 7th, 2007

> What's the reason for assigning different classnames twice in sequence on the same object?
> Where do the variables link3 and link4 come from?
My program was just a literal translation of what the OP posted with the necessary syntactic changes made. I was expecting a bit more interaction from his side before dissecting the entire thing, but, meh. ;-P

I don't accept change. I don't deserve to live.

Happiness corrupts people.

Failing to value the lives of others cheapens your own.