title: Show / hide divs clarification with javascript
body: <p>A highly similar question has been asked already, and it has partly solved my problem, but I'd like to know if <code>class</code> or <code>id</code> NAMES can be used in this example instead of <code>ul li</code> - <code>.menu</code>, <code>#menu</code>, etc.</p>
  
  <p>css: <code>div { display:none; background:red; width:200px; height:200px; }</code></p>
  
  <p>js:</p>
  
  <pre><code>$(function() {
      $('ul li').each(function() {
          $(this).click(function(e) {
              var i = $(this).index();
              $('div').hide();
              $('div:eq('+i+')').show();
          });
      });
  });
  </code></pre>
  
  <p>Here's the jsfiddle for this example: <a href="http://jsfiddle.net/Z3Hj7/" rel="nofollow">http://jsfiddle.net/Z3Hj7/</a></p>
  
  <p>Apologies in advance if this question is stupid, but I've been mucking about with it for a while and cant figure it out.</p>