CODEWITHSUNDEEP
javascriptjqueryhtmlajax
bilalchina
bilalchina

Reputation: 33

force content of specific tab ajax to show when page load

I want the content of the .active class to show first when page load

but when I load the page the content of the first class show

this is my nav menu 

<ul class="nav nav-pills navTab">
 <li role="presentation" class="">
     <a aria-controls="data" role="tab" data-toggle="tab" data-name="info" aria-expanded="false">info</a>
 </li>

 <li role="presentation" class="active">
  <a aria-controls="data" role="tab" data-toggle="tab" data-name="servers" aria-expanded="true">watch</a>
  </li>

 <li role="presentation">
<a aria-controls="data" role="tab" data-toggle="tab" data-name="download"> download</a>
</li>

 <li role="presentation">
 <a aria-controls="data" role="tab" data-toggle="tab" data-name="selary"> selary</a>
 </li>
 <li role="presentation">
  <a aria-controls="data" role="tab" data-toggle="tab" data-name="comment"> comment</a>
 </li>
 </ul>

and this my content 

<div class="getData">
  <ul class="postInfo">
    info content here 
 </ul>
</div>



 <div class="getData">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="servers">
                    servers content here    
            </div>
        </div>
    </div> 
</div>

the first class is postInfo, i want to show the content of the class row when page load

Upvotes: 0

Views: 230

Answers (3)

bilalchina
bilalchina

Reputation: 33

thank you all, I found the issue, the problem was in the JS file, I was calling another file, so I change it to call servers.php, and it works :)

Upvotes: 0

Som
Som

Reputation: 598

Try Following

$('li').each(function(i){
   		if($(this).hasClass('active'))
        {
        $(this).css('display','block');
        }
        else
        {
        $(this).css('display','none');
        }
   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav nav-pills navTab">
 <li role="presentation" class="">
     <a aria-controls="data" role="tab" data-toggle="tab" data-name="info" aria-expanded="false">info</a>
 </li>

 <li role="presentation" class="active">
  <a aria-controls="data" role="tab" data-toggle="tab" data-name="servers" aria-expanded="true">watch</a>
  </li>

 <li role="presentation">
<a aria-controls="data" role="tab" data-toggle="tab" data-name="download"> download</a>
</li>

 <li role="presentation">
 <a aria-controls="data" role="tab" data-toggle="tab" data-name="selary"> selary</a>
 </li>
 <li role="presentation">
  <a aria-controls="data" role="tab" data-toggle="tab" data-name="comment"> comment</a>
 </li>
 </ul>
 <div class="getData">
  <ul class="postInfo">
    info content here 
 </ul>
</div>



 <div class="getData">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="servers">
                    servers content here    
            </div>
        </div>
    </div> 
</div>

Upvotes: 1

Stuart
Stuart

Reputation: 6785

You need to explicitly open the tab after the page has loaded, something like:

$('.navTab .active').tab('show');

Upvotes: 1

Related Questions