2015-11-24 4 views
1

Я сделал интерактивную систему вкладок, чтобы показать динамический контент, но он отлично работает, но Я изо всех сил стараюсь найти решение, отображающее первый отображаемый вкладку, и сделать первую вкладку активированной при загрузке страницы , Любая помощь будет очень благодарна!отображает содержимое первой вкладки при загрузке страницы

Вот мой яваскрипт и HTML разметка:

<script type="text/javascript"> 
 

 
    $('[data-toggle="tabajax"]').click(function(e) { 
 
    var $this = $(this), 
 
     loadurl = $this.attr('href'), 
 
     targ = $this.attr('data-target'); 
 

 
    $.get(loadurl, function(data) { 
 
     $(targ).html(data); 
 
    }); 
 

 
    $this.tab('show'); 
 
    return false; 
 
}); 
 
    
 

 

 
</script>
<div class="container"> 
 
    <div class="row"> 
 
    <h2 style="text-align: center;">Powerful Purpose</h2> 
 
    <div class="" style="width:70%;margin:0 auto;"> 
 
    <ul class="nav nav-tabs tabs-up " id="mainNavTabs" style="text-align: center;"> 
 
     <li><a href="about.php" data-target="#aboutus" class="media_node active span" id="aboutus_tab" data-toggle="tabajax" rel="tooltip">About The ADRC</a></li> 
 
     <li><a href="participants.php" data-target="#participants" class="media_node span" id="participants_tab" data-toggle="tabajax" rel="tooltip"> Participants/Researchers</a></li> 
 
     <li><a href="researcher.php" data-target="#researcher" class="media_node span" id="researcher_tab" data-toggle="tabajax" rel="tooltip">Scientists/Researchers</a></li> 
 
     <li><a href="healthcare.php" data-target="#healthcare" class="media_node span" id="healthcare_tab" data-toggle="tabajax" rel="tooltip">Healthcares providers</a></li> 
 
    </ul> 
 
    </div> 
 
    <div class="tab-content"> 
 
     <div class="tab-pane active" id="aboutus"> </div> 
 
     <div class="tab-pane" id="participants"> </div> 
 
     <div class="tab-pane " id="researcher"></div> 
 
     <div class="tab-pane " id="healthcare"></div> 
 
    </div> 
 
    </div><!--/row--> 
 
</div><!--/container-->

Beckmann

ответ

0

Trigger щелчок на первом tabajax.

$('[data-toggle="tabajax"]').click(function(e) { 
    var $this = $(this), 
     loadurl = $this.attr('href'), 
     targ = $this.attr('data-target'); 

    $.get(loadurl, function(data) { 
     $(targ).html(data); 
    }); 

    $this.tab('show'); 
    return false; 
    }); 

    $('[data-toggle="tabajax"]:eq(0)').trigger('click'); 
Смежные вопросы