[英]target a <li> so that you can click
I am currently developing a program. 我目前正在开发程序。 It includes a 3 option navigation bar.
它包括一个3选项导航栏。 It uses
<li>
and does not have id's, when i try to add id's to them it messes up the order, and doesent even work with a click! 它使用
<li>
并且没有ID,当我尝试向其添加ID时,它弄乱了顺序,甚至单击时也无法工作! Im starting to loose faith with it.. can anyone help me on this one, 我开始对此失去信心..有人可以帮我吗,
my GOAL is to have it alert different things on different clicks, so than I could link different html pages, 我的目标是让它在不同的点击次数上发出不同的警报,因此我可以链接不同的html页面,
<ul class="ui-module menu-selector" id="menu-selector">
<li>Home</li>
<li class="js-is-active">Notif's</li>
<li>Profile</li>
</ul>
Since you don't have ids, I suppose that childNodes
property will help a lot. 由于您没有ID,因此我认为
childNodes
属性会有所帮助。
For example, you can use: 例如,您可以使用:
var lis = document.getElementById('menu-selector').childNodes;
// or you can select lis directly...
// var lis = document.querySelectorAll('#menu-selector li');
Array.prototype.slice.call(lis)
.forEach(function(li) {
// do something... like
li.onclick = function () {
console.log(this);
}
});
Note: childNodes
(or querySelectorAll
return) is NodeList type, and I use Array.prototype.slice.call()
in order to use forEach()
method on it. 注意:
childNodes
(或querySelectorAll
返回)是NodeList类型,我使用Array.prototype.slice.call()
以便在其上使用forEach()
方法。
See childNodes for more details. 有关更多详细信息,请参见childNodes 。
如果由于某种原因您不想在li元素上使用id,则可以使用以下逻辑来选择活动的li
:
$("#menu-selector li.active").on("click", function(){ alert($(this).text()) });
I added id's for you, not sure what you meant by it messing up the order. 我为您添加了ID,不知道它搞乱了顺序是什么意思。
HTML 的HTML
<div class="ui-items">
<header class="ui-module app-header">VoiceBox <a href="#" class="app-header__btn app-header__btn--friends"><i class="entypo-user-add"></i></a>
<a href="#" class="app-header__btn app-header__btn--edit"><i class="entypo-pencil"></i></a>
</header>
<div id="outer">
<ul class="ui-module menu-selector" id="menu-selector">
<li id="home_li">Home</li>
<li id="notif_li" class="js-is-active">Notif's</li>
<li id="profile_li">Profile</li>
</ul>
</div>
</div>
Javascript Java脚本
var listItem = $('#menu-selector > li');
$(listItem).click(function() {
$(listItem).removeClass('js-is-active');
$(this).toggleClass('js-is-active');
});
$('#home_li').click(function(){
alert('home clicked')
})
$('#notif_li').click(function(){
alert('notifs clicked')
})
$('#profile_li').click(function(){
alert('profile clicked')
})
Fiddle http://jsfiddle.net/1swep9oq/2/ 小提琴http://jsfiddle.net/1swep9oq/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.