頁面加載的JavaScript函數

Question

頁面加載時，我需要將Div id“ Div01 ”狀態更改為“ highlight ”類。
請參見下面的代碼：

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;}

請幫助我解決問題。

Answer 1

嘗試

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

Answer 2

嘗試這個

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

要么

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

要么

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

Answer 3

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

Answer 4

對於Javascript：

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

對於Jquery：

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

Answer 5

您的onclick事件會將“ this”發送到函數，但這是的onclick事件，而不是的onclick事件。 這是您想要的嗎？

由於您未使用的固有點擊功能，因此建議您擺脫它。 只需在上單擊事件即可，因此單擊它將觸發roleActive（）並適當地應用這些類。