Solved It!
After encountering a problem created by some sloppy moves on my part, I managed to solve it. However, another issue arose: adding the class current to li with data-tab="tab-1 upon page load.
$('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');
});.tabs li.current {
color: red;
}
.tab-content {
display: none;
}
.tab-content.current {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="innovation">
<div class="categories-wrap">
<ul class="tabs">
<li class="tab-link" data-tab="tab-1">
<i class="sprite-call-black"></i>
<h4>Pristine coverage</h4>
<p>Enjoy your calls without interuptions like dropped calls, poor sound quality, and delayed video.</p>
</li>
<li class="tab-link" data-tab="tab-2">
<i class="sprite-call-black"></i>
<h4>Chat messaging</h4>
<p>Chat in real time with connections all around the world. </p>
</li>
<li class="tab-link" data-tab="tab-3">
<i class="sprite-call-black"></i>
<h4>Video calling</h4>
<p>WiFi paired with reliable cellular service is how we’ve got you covered in more places than ever before.</p>
</li>
<li class="tab-link" data-tab="tab-4">
<i class="sprite-call-black"></i>
<h4>Photo share</h4>
<p>WiFi paired with reliable cellular service is how we’ve got you covered in more places than ever before.</p>
</li>
</ul>
</div>
<div class="tabs-wrap">
<div id="tab-1" class="tab-content current">
<img src="" alt="Pristine Coverage">
</div>
<div id="tab-2" class="tab-content">
<img src="" alt="Chat Messaging">
</div>
<div id="tab-3" class="tab-content">
<img src="" alt="Video Calling">
</div>
<div id="tab-4" class="tab-content">
<img src="" alt="Photo Share">
</div>
</div>
</section>