.. . wrote:
Hi
I need some help with java script . I have four link button on my ASPX
page . Each button gives user specific message when they click on it
The first button is is the default button and the button text is
already bold and rest of them is dim . When user click the second button
that button text will be bold rest of them will be dim and so on . So in
a zest the button user will click be bold and rest three will be dim .
How do I do that . Currently only the default button text is bold . All
the buttons are working just not changing the text .Please help
Below shows a general way to achieve what you are after. You can put
the onclick on a button if you like and reference the text some other
way. If you want to put multiple classes on the divs, you'll need to do
things a little differently.
The advantage of adding the onclick dynamically is that you don't have
to manually code an onclick on every div element and if the user doesn't
have JavaScript enabled, they wont see a bunch of non-functioning buttons.
<head><title>Div play</title>
<style type="text/css">
.normalText { font-weight: normal;}
.boldText { font-weight: bold;}
</style>
<script type="text/javascript">
var currentEl;
function toggleClass(el, a, b)
{
currentEl.className = a;
currentEl = el;
currentEl.className = b;
}
function initClick( id )
{
if ( !document.getElementById || !document.getElementsByTagName ) {
return;
}
var d = document.getElementById( id );
var divs = d.getElementsByTagName('div');
var i, j = divs.length;
for ( i=0; i<j; i++ ){
divs[i].onclick = function() {
toggleClass(this, 'normalText','boldText');
};
divs[i].className = 'normalText';
}
currentEl = divs[0];
currentEl.className = 'boldText';
}
window.onload = function() {
initClick('someDivs');
};
</script>
</head>
<body>
<div id="someDivs">
<div>Here is some text</div>
<div>Here is some text</div>
<div>Here is some text</div>
<div>Here is some text</div>
<div>Here is some text</div>
</div>
</body>
--
Rob
