JQuery по щелчку на странице загрузки добавить класс

Question

решаемые

первое это было создано для другой проблемы, но я решить из-за некоторых неаккуратных движений по мне ... все равно я получил еще одну проблему, и добавляет класс current на li, с data-tab="tab-1, на странице груз.

$('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>

Answer 1

Используйте это?

$(document).ready(function() { 
    $(".current").removeClass("current"); 
    $(".tabs-wrap #tab-1").addClass("current"); 
}); 

Answer 2

Просто вызвать щелчок на первой закладке на странице загрузки:

$('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'); 
 
}); 
 

 
//Trigger click on first tab 
 
$("[data-tab='tab-1']").click();

.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>