如果设置了参数,则将Jquery选项卡设置为活动状态


Set the Jquery tab as active if a parameter is set

在我的项目中,我使用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>