解決

1這是另一個問題，創建的類，但我解決它，因爲通過我有些草率舉動......無論如何，我得到了另一個問題，即增加current類在li，與data-tab="tab-1，頁面加載。的jQuery的點擊，頁面加載添加

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

來源

2015-06-29 Stefan

使用此？

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

來源

2015-06-29 19:18:14

都能跟得上： -/basicly其他選項卡是隱藏的，但是當我點擊它贏得了第二選項卡上的」 t在他身上添加課程 – Stefan

@Soullighter檢查你的小提琴，看起來不像是在工作。 –

好吧，我必須說，這很奇怪。無論如何，謝謝你的時間壽 – Stefan

只需觸發點擊頁面加載的第一個選項卡：

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

來源

2015-06-29 20:01:25 cyberbit

的jQuery的點擊，頁面加載添加

解決

回答

相關問題