Question

<div class="tabContainer">
  <ul class="Tabs" id="tabset">
    <li id="tab1" class="selected" onclick="tabs(this)">Home</li>
    <li id="tab2" onclick="tabs(this)">Tab 2</li>
    <li id="tab3"  onclick="tabs(this)">Tab 3</li>
  </ul>
</div>

我想删除onclick="tabs(this)"并将其转换为事件。我怎样才能做到这一点？目前，以下代码是我无法解决的问题。

var h=$("tabset").children;
for (i=0;i<h.length;i++) h[i].onclick=tabs(this);

哦，请不要jquery，但是var $ = function(x){return document.getElementById(x)}; 注意：我需要(this)部分。

Answer 1

您似乎在代码中使用了一些$函数，这不是标准函数。例如，如果您使用的是jQuery，则代码可能如下所示：

$('#tabset li').on('click', tabs);

如果你不想使用jQuery，那么你将不得不调整你的选择器：

var h = document.getElementById('tabset').getElementsByTagName('li');
for (var i = 0; i < h.length; i++) {
    h[i].onclick = tabs;
}

或者你宣布：

var $ = function(x){
    return document.getElementById(x)
};

你也可以使用：

var h = $('tabset').getElementsByTagName('li');
for (var i = 0; i < h.length; i++) {
    h[i].onclick = tabs;
}

Answer 2

我建议：

var lis = document.getElementById('tabset').getElementsByTagName('li');
for (var i = 0, len = lis.length; i < len; i++){
    lis[i].onclick = tabs; // inside the function 'this' will refer to the node.
}

JS Fiddle demo

虽然您可以将点击处理程序分配给包含ul元素：

var list = document.getElementById('tabset');
tabset.onclick = list.addEventListener('click', function(e){
    tabs(e.target);
}, false);

JS Fiddle demo

你可以，现在我看到你正在对你的功能做些什么，避免使用getElementById()并简单地链：

$('tabset').addEventListener('click', function(e){
    tabs(e.target);
}, false);

JS Fiddle demo

使用jQuery，当您出现（在编辑之前）尝试使用时：

$('#tabset li').click(function(){
    tabs(this);
});

将事件附加到子元素

2 个答案: