lundi 29 juin 2015

jquery tabs function on click

Only problem that i have is when page load, all 4(four) tabs have .current class on it. Want i want is that 1st tab (data-tab="tab-1) have class .current on page load and all other to be hidden. Here is my full project section

$('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="http://ift.tt/1oMJErh"></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>

Aucun commentaire:

Enregistrer un commentaire