Question about CssClass

[Bart Schelkens]

Hi,

I have the following question.

My website is divided in 3 frames.
In my topFrame I display a list (<UL></UL>)
The items in that list are tabs to navigate through my site.
When the user clicks a tab, the mainFrame displays the correct page.

What I would like to do now is, whenever the user clicks an item in my list,
I want that item to be displayed in bold. All the other items should remain
normal.

I've been trying a number of things, but I can't get it done.
Can anyone help me?

Thx.

 

[Karl]

you could simply do onClick="this.style.fontWeight = 'bold';"

Karl

 

[Bart Schelkens]

Karl,

we tried this, but we couldn't figure out how we could set it back to normal
when we click on another item in the list.

 

[Bart Schelkens]

We tried this but when we click on another item, the first one remains bold.
What we want is that when we click on another item, the first one returns to
normal.

 

[Bart Schelkens]

We've already put this in our stylesheet, but it doesn't help.
Sorry

 

[Karl]

Yes I thought I that, but figured you could figure it out.
I take it it looks something like this:
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
There are millions of ways to do this, but try:
<a href="xxxx" onClick="setBold(this);"....>xxx</a>


function setBold(item){
var ul = item.parentNode.parentNode;
var lis = ul.getElementsByTagName("LI");
for (var i = 0; i < lis.length; ++i){
lis.getElementsByTagName("A")[0].style.fontWeight = 'normal';
}
item.style.fontWeight = 'bold';
}

or you could give them all the same name
<a name="xxx" href="...." onClick="setBold(this);" />

and do
function setBold(item){
var items = document.getElementsByName("xxx");
for (var i = 0; i < items.length; ++i){
items.style.fontWeight = 'normal';
}
item.style.fontWeight = 'bold';
}


Karl

 

[Bart Schelkens]

Karl,
thx for the info.
It works just fine now.

Yes I thought I that, but figured you could figure it out.
I take it it looks something like this:
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
There are millions of ways to do this, but try:
<a href="xxxx" onClick="setBold(this);"....>xxx</a>


function setBold(item){
var ul = item.parentNode.parentNode;
var lis = ul.getElementsByTagName("LI");
for (var i = 0; i < lis.length; ++i){
lis.getElementsByTagName("A")[0].style.fontWeight = 'normal';
}
item.style.fontWeight = 'bold';
}

or you could give them all the same name
<a name="xxx" href="...." onClick="setBold(this);" />

and do
function setBold(item){
var items = document.getElementsByName("xxx");
for (var i = 0; i < items.length; ++i){
items.style.fontWeight = 'normal';
}
item.style.fontWeight = 'bold';
}


Karl

We tried this but when we click on another item, the first one remains bold.
What we want is that when we click on another item, the first one

returns

to
normal.

"Karl" <none> wrote in message news:[email protected]...