<div> onClick运行javascript函数不起作用

Question

I have the following html code

<div id="userMenu">
  <ul>
    <li id="tab1">
      <div onclick="displayTab(1);" class="tab">Transaction History</div>
    </li>
    <li id="tab2">
      <div onClick="displayTab(2)" class="tab">Top Up</div>
    </li>
    <li id="tab3">
      <div onclick="displayTab(3);" class="tab">Profile</div>
    </li>
  </ul>
</div>
<div style="clear: both; margin: 15px; border: 2px solid #99ffff;">
  <div id="content1" class="tabContent">
    Content1
  </div>
  <div id="content2" class="tabContent" style="display: none;">
    Content2
  </div>
  <div id="content3" class="tabContent" style="display: none;">
    Content3
  </div>
</div>

javascript

function displayTab(tabNo){ alert(tabNo);
  for(i = 1; i < 4; i++){
    document.getElementById('content'+i).style.display = 'none';
  } 
  document.getElementById('content'+tabNo).style.display= 'block';
}

Why is it that the function displayTab cannot be activated? If I change the onclick with onclick="alert('1')" , it worked. I tried on Opera and Firefox, both resulting the same. Error console tells me that there's a

ReferenceError: Undefined variable displayTab

Do note that that is not the full code. Even crazier fact is that if I use that code (the one I put here) as is, it worked and no error in Error Console. Help, anyone?

Answer 1

尝试使用

onClick="javascript:displayTab(1)"