单击jquery，页面加载添加类

Question

解决

第一次这是为另一个问题创建的，但是我解决了它，因为我的一些草率的动作......无论如何我还有另一个问题，就是在current上添加li课，{{{ 1}}，在页面加载时。

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;
}

Answer 1

使用它？

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

Answer 2

只需在页面加载时点击第一个标签即可：

＆＃13;

＆＃13;

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

＆＃13;

.tabs li.current {
  color: red;
}
.tab-content {
  display: none;
}
.tab-content.current {
  display: block;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;