Preparation code

<ul id="main_nav">
  <li>
    <a href="#" id="mission_nav" title="View the Langarth mission" style="color: rgb(156, 165, 174);">Mission.</a>
  </li>
  <li>
    <a href="#" id="guarantee_nav" title="View the Langarth guarantee" style="color: rgb(156, 165, 174);">Guarantee.</a>
  </li>
  <li>
    <a href="#" id="understand_nav" title="Langarth want to understand our customer goals"
    style="color: rgb(67, 90, 104);">Understand.</a>
  </li>
  <li>
    <a href="#" id="define_nav" title="Langarth will help you define your brand" style="color: rgb(156, 165, 174);">Define.</a>
  </li>
  <li>
    <a href="#" id="promote_nav" title="Langarth will work with you to help you promote your company"
    style="color: rgb(156, 165, 174);">Promote.</a>
  </li>
  <li>
    <a href="#" id="contact_nav" title="Contact Langarth about working with you." style="color: rgb(156, 165, 174);">Contact.</a>
  </li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

$('#main_nav').on('click', 'a', function(e) {
  e.preventDefault();
  var _el = e.target.id;
});

$('#main_nav').on('click', 'li a', function(e) {
  e.preventDefault();
  var _el = e.target.id;
});

var $nav = $('#main_nav')
$nav.on('click', 'li a', function(e) {
  e.preventDefault();
  var _el = e.target.id;
});

var $nav = $('#main_nav')
$nav.on('click', 'a', function(e) {
  e.preventDefault();
  var _el = e.target.id;
});

$('#main_nav a').css('color', function() {
  //
});

$('a', '#main_nav').css('color', function() {
  //
});

$('#main_nav').find('a').css('color', function() {
  //
});

var $nav1 = $('#main_nav')

$nav1.find('a').css('color', function() {
  //
});

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments