title: How do I make this JavaScript tab active on load?
body: <p>I'm still learning to code and I have a pretty easy/beginner type question.</p>
  
  <p>When my page loads all tabs in the tab container are grey.  When you click on a tab that tab header takes on the #tab-container ul.tab-menu img.active div settings in the CSS code.  How can I make the first tab take on that active div setting when the page first loads without having to click on it?</p>
  
  <p>Here's a fiddle: <a href="https://jsfiddle.net/gxswvmb0/1/" rel="nofollow">https://jsfiddle.net/gxswvmb0/1/</a></p>
  
  <p>The code I tried per first comment:</p>
  
  <pre><code>$(document).ready(function(){
  var activeTabIndex = -1;
  var tabNames = ["tab1","tab2","tab3"];
  
  $(".tab-menu &gt; img").click(function(e){
      for(var i=0;i&lt;tabNames.length;i++) {
          if(e.target.id == tabNames[i]) {
              activeTabIndex = i;
          } else {
              $("#"+tabNames[i]).removeClass("active");
              $("#"+tabNames[i]+"-tab").css("display", "none");
          }
      }
      $("#"+tabNames[activeTabIndex]+"-tab").fadeIn();
      $(#tab1).addClass("active");
      return false;
  });
  </code></pre>
  
  <p>});</p>