Simple Nav with E.Delegation

by Elijah Tate

HTML

<section class="tabNavSect">
  <header>Navigation</header>
  <ul id="navList">
    <li class="navEl" data-content="oneContent">One</li>
    <li class="navEl" data-content="twoContent">Two</li>
  </ul>
</section>

<section class="content" id="oneContent">
  ONE
</section>

<section class="content" id="twoContent">
  TWO
</section>

CSS

ul li:nth-child(odd) {
  background: gray;
}

ul li:nth-child(even) {
  background: white;
}

ul li {
  decoration: none;
  display: inline;
}

.tabNavSect ul {
  display: flex;
}

JavaScript

var Navigation = (function() {
  function setHandler() {
  	$(".content").css("display", "none");
    $("#navList").on("click", showContent);
  }
  
  function showContent(e){
  	var myContent = $(e.target).attr("data-content");
    $(".content").css("display", "none");
    $("#" + myContent).css("display", "block");
  }
  return {
    setHandler: setHandler
  }
});

var thisNav = Navigation();
thisNav.setHandler();