target a <li> so that you can click

Question

I am currently developing a program. It includes a 3 option navigation bar. 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! 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,

fiddle used HERE .

<ul class="ui-module menu-selector" id="menu-selector">
  <li>Home</li>
  <li class="js-is-active">Notif's</li>
  <li>Profile</li>
</ul>

Answer 1

Since you don't have ids, I suppose that childNodes property will help a lot.

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.

See childNodes for more details.

Answer 2

如果由于某种原因您不想在li元素上使用id，则可以使用以下逻辑来选择活动的li ：

$("#menu-selector li.active").on("click", function(){ alert($(this).text()) });

Answer 3

I added id's for you, not sure what you meant by it messing up the order.

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

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/