JavaScript function on page load

Question 1

I need to change the Div id "Div01" state to "highlight" class when the page loads.
Please see the code below:

HTML:

<div id="div01"><a href="#" class="btn" onclick="roleActive(this);">user</a></div>

JS:

var role; function roleActive(obj){ if (role)
role.className = 'btn';
obj.className = 'highlight';
role = obj;}

CSS:

.btn{
display:block;
height:25px;
width:100px;
padding:5px 0px 0px 0px;
text-align:center;
font-size:16px;} 
.highlight{
cursor:default;
display:block;
height:25px;
width:100px;
padding:5px 0px 0px 0px;
text-align:center;
font-size:16px;
background-color:#FFF;
border-bottom:4px solid #F0AB00;
color:#000;
text-decoration:underline;}
a.btn:link{background-color:#000;color:#FFF;}
a.btn:visited{background-color:#000;color:#FFF;}
a.btn:hover,active{background-color:#FFF;color:#000;text-decoration:underline; border-bottom:4px solid #F0AB00;}

Kindly help me to fix the problem.

Question 2

Try

<script>
 window.onload = function(){
 roleActive(document.getElementById('div01').children[0]);
 }
</script>

Question 3

Thank you so much. It really worked for me :).<br> I have one more query but it hard to explain here. How can i create it using the fiddle.net

Question 4

Hi @Arun, Please find the fiddle here : jsfiddle.net/aki_shaitan/ruDek. <br/> In this i want a function that when i click on "Button 01" it should open its submenu"01". After this when click on some other button, it should it hide the previous submenu and open the relevant submenu.

Question 5

@Ankit it will be better if you post it as a separate question'

Question 6

I am facing some issue with this script because i made some changes in the functionality. Kindly help me.

Question 7

try this

window.onload = function(){
 document.getElementById('div01').className = 'highlight'
}

or

<script>
 document.getElementById('div01').className = 'highlight'
</script>

or

<script>
exampleCall();
function exampleCall()
{
 document.getElementById('div01').className = 'highlight'
}
</script>

Question 8

using this function, the class "highlight" gets changed but still i can see the ".btn" class on top.

Question 9

document.addEventListener('DOMContentLoaded', function(){
 document.getElementById('div01').className = 'highlight';
}, false);

Question 10

For Javascript:

window.onload = function() {
 document.getElementById('div01').className = 'highlight';
}

For Jquery:

$(function() {
 $('#div01').addClass('highlight');
});

Question 11

Your onclick event is sending 'this' to the function, but it's the onclick event of the , not of the . Is this what you intended?

Since you're not using the inherent click functionality of the then I'd suggest getting rid of it. Just have the click event on the , so clicking it will fire roleActive() and apply the classes appropriately.

Arun P Johny 389k68 gold badges533 silver badges532 bronze badges · Accepted Answer · 2013-04-19 03:22:15Z

2

Try

<script>
 window.onload = function(){
 roleActive(document.getElementById('div01').children[0]);
 }
</script>

Share

Improve this answer

edited Apr 19, 2013 at 3:45

answered Apr 19, 2013 at 3:22

Arun P Johny's user avatar

Arun P Johny

389k68 gold badges533 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ankit

Ankit Over a year ago

Thank you so much. It really worked for me :).<br> I have one more query but it hard to explain here. How can i create it using the fiddle.net

2013年04月19日T03:43:39.523Z+00:00

Ankit

Ankit Over a year ago

Hi @Arun, Please find the fiddle here : jsfiddle.net/aki_shaitan/ruDek. <br/> In this i want a function that when i click on "Button 01" it should open its submenu"01". After this when click on some other button, it should it hide the previous submenu and open the relevant submenu.

2013年04月19日T04:21:09.71Z+00:00

Arun P Johny

Arun P Johny Over a year ago

@Ankit it will be better if you post it as a separate question'

2013年04月19日T04:25:46.697Z+00:00

Ankit

Ankit Over a year ago

I am facing some issue with this script because i made some changes in the functionality. Kindly help me.

2013年05月23日T04:50:14.257Z+00:00

CollectivesTM on Stack Overflow

JavaScript function on page load

5 Answers 5

4 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

5 Answers 5

4 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related