在我的项目中,我使用jQuery选项卡,如
<div class="video_b_tab" id="tabs">
<ul class="video_b_tabul">
<li class="video_b_tabli"><a href="#tabs-1" onclick="profilesetting('<?php echo base_url();?>')"><i class="fa fa-user"></i><span class="chngpspan"><?php echo lang('profile').' '.lang('settings')?></span></a></li>
<li class="video_b_tabli"><a href="#tabs-2" onclick="moviesetting('<?php echo $id;?>','<?php echo base_url();?>')"><i class="fa fa-film"></i><span class="chngpspan"><?php echo lang('movieset');?></span></a></li>
<li class="video_b_tabli"><a href="#tabs-3" onclick="usersetting('<?php echo $id;?>','<?php echo base_url();?>')"><i class="fa fa-film"></i><span class="chngpspan"><?php echo "User Settings";?></span></a></li>
</ul>
<div class="v_dissc_tab" id="tabs-1">
<div class="rightsettingdiv" id="profilediv"></div>
</div>
<div class="" id="tabs-2">
<div class="moviesettings" id="moviediv"></div>
</div>
<div class="" id="tabs-3">
<div class="moviesettings" id="usersetdiv"></div>
</div>
<div class="mainsettingdiv"></div>
</div>
如果url包含参数msg
,那么我想将tabs-3
设置为选中。
$(document).ready(function()
{
if(window.location.search)
{
$("#tabs").tabs(); // want to set tab-3 as selected or active
}
});
如果一个选项卡是活动的,html将看起来像:
<li class="video_b_tabli ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tabs-2" aria-labelledby="ui-id-2" aria-selected="true">
<a href="#tabs-2" onclick="moviesetting('1','http://neos.or/project/')" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">
<i class="fa fa-film"></i>
<span class="chngpspan">Movie Settings</span>
</a>
</li>
我该怎么做?
工作演示
尝试以下代码片段:
$(document).ready(function () {
var url = window.location.href;
var tab = url.indexOf('msg') >-1 ? 2 :0; //tabs start from 0
$("#tabs").tabs({
active: tab
});
//or $("#tabs").tabs( "option", "active", tab );
});
试试这个…
$(document).ready(function()
{
if(window.location.herf.indexOf('msg') > -1)
{
$("#tabs ul li:eq(2) a").click(); // want to set tab-3 as selected or active
}
});
您可以使用活动选项
$(document).ready(function () {
if (window.location.search) {
$("#tabs").tabs({
active: 2 //0 based index
}); // want to set tab-3 as selected or active
}
});
如果您想在创建选项卡小部件后更改活动选项卡,您可以使用选项方法,如
$("#tabs").tabs('option', 'active', 2);
通过代码选择tab-3,您可以使用:
$('#tabs').tabs('select','tabs-3')
不需要JS的帮助,使用PHP的if-else
<?php
$tab = explode('#', $_SERVER['REQUEST_URI']);
?>
In HTML
<li class="video_b_tabli" class="<?php echo ($tab[1] == "tabs-1") ? "active": null ?>" ><a href="#tabs-1"><i class="fa fa-user"></i><span class="chngpspan"><?php echo lang('profile').' '.lang('settings')?></span></a></li>