将活动附加到子元素

问题描述：

<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)部分。

答

我建议：

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

答

您似乎在您的代码中使用了一些不是标准的$函数。例如，如果你正在使用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; 
}

将活动附加到子元素

相关推荐