[英]force content of specific tab ajax to show when page load
我希望.active类的内容在页面加载时首先显示
但是当我加载页面时,显示第一类的内容
这是我的导航菜单
<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>
第一类是postInfo ,我想在页面加载时显示类行的内容
页面加载后,您需要显式打开选项卡,例如:
$('.navTab .active').tab('show');
尝试以下
$('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>
谢谢大家,我找到了问题,问题出在JS文件中,我正在调用另一个文件,所以我将其更改为调用servers.php,它可以工作:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.