title: jquery on click, on page load add class
body: <h1>Solved</h1>
  
  <p>1st this was created for another problem, but i solve it because of some sloppy moves by me...anyway i got another problem and that is adding class <code>current</code> on <code>li</code>, with <code>data-tab="tab-1</code>, on page load. 
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('ul.tabs li').click(function(){
          var tab_id = $(this).attr('data-tab');
  
          $('ul.tabs li').removeClass('current');
          $('.tab-content').removeClass('current');
  
          $(this).addClass('current');
          $("#"+tab_id).addClass('current');
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tabs li.current {
    color: red;
  }
  .tab-content {
    display: none;
   }
  .tab-content.current {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;section class="innovation"&gt;
    &lt;div class="categories-wrap"&gt;
      &lt;ul class="tabs"&gt;
        &lt;li class="tab-link" data-tab="tab-1"&gt;
          &lt;i class="sprite-call-black"&gt;&lt;/i&gt;
          &lt;h4&gt;Pristine coverage&lt;/h4&gt;
          &lt;p&gt;Enjoy your calls without interuptions like dropped calls, poor sound quality, and delayed video.&lt;/p&gt;
        &lt;/li&gt;
        &lt;li class="tab-link" data-tab="tab-2"&gt;
          &lt;i class="sprite-call-black"&gt;&lt;/i&gt;
          &lt;h4&gt;Chat messaging&lt;/h4&gt;
          &lt;p&gt;Chat in real time with connections all around the world. &lt;/p&gt;
        &lt;/li&gt;
        &lt;li class="tab-link" data-tab="tab-3"&gt;
          &lt;i class="sprite-call-black"&gt;&lt;/i&gt;
          &lt;h4&gt;Video calling&lt;/h4&gt;
          &lt;p&gt;WiFi paired with reliable cellular service is how we’ve got you covered in more places than ever before.&lt;/p&gt;
        &lt;/li&gt;
        &lt;li class="tab-link" data-tab="tab-4"&gt;
          &lt;i class="sprite-call-black"&gt;&lt;/i&gt;
          &lt;h4&gt;Photo share&lt;/h4&gt;
          &lt;p&gt;WiFi paired with reliable cellular service is how we’ve got you covered in more places than ever before.&lt;/p&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="tabs-wrap"&gt;
      &lt;div id="tab-1" class="tab-content current"&gt;
        &lt;img src="" alt="Pristine Coverage"&gt;
      &lt;/div&gt;
      &lt;div id="tab-2" class="tab-content"&gt;
        &lt;img src="" alt="Chat Messaging"&gt;
      &lt;/div&gt;
      &lt;div id="tab-3" class="tab-content"&gt;
        &lt;img src="" alt="Video Calling"&gt;
      &lt;/div&gt;
      &lt;div id="tab-4" class="tab-content"&gt;
        &lt;img src="" alt="Photo Share"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>