javascript - 自动激活锚定选项卡

Question

我正在尝试一些 JavaScript 代码，但遇到了一个元素告诉我无法单击的问题。目标是根据 URL 中的 anchor 激活选项卡。这是简短的版本:

<tab onClick="showTab('Dogs')">Dogs</tab>
<tab onClick="showTab('Cats')">Cats</tab>
<script type="text/javascript">
var chunks = document.URL.split('#')
if(chunks.length > 1) {
  var anchored_tab = chunks.pop().toLowerCase()
  var tabs = document.getElementsByTagName('tab')
  for(i in tabs) {
    if(tabs[i].innerHTML.toLowerCase() == anchored_tab) {
      alert("trying to click tab "+tabs[i].innerHTML)
      tabs[i].click()  // TypeError: Object#<HTMLElement> has no method 'click'
    }
  }
}
</script>

假设 URL 以“#dogs”结尾，则警报正确显示“尝试单击选项卡 Dogs”，但随后我在下一行收到异常，表示该元素没有单击 方法。

我正在 Chrome 12 上进行测试。

Answer 1

您可以在现有代码之上添加以下代码，这将在不允许您直接 click() 的浏览器中向实际单击事件添加一个触发事件。请注意，这种类型的功能通常包含在 jquery 或原型(prototype)等库中。

if(typeof HTMLElement!='undefined'&&!HTMLElement.prototype.click) {
    HTMLElement.prototype.click=function() {
        var evt = this.ownerDocument.createEvent('MouseEvents');
        evt.initMouseEvent('click', true, true, this.ownerDocument.defaultView, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
        this.dispatchEvent(evt);
    }
}