如果设置了参数，则将“ jQuery”选项卡设置为活动状态

Question

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

我怎样才能做到这一点？

Answer 1

工作演示

尝试以下代码段：

$(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 );

});

Answer 2

尝试这个...

$(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
    }
});

Answer 3

要通过代码选择Tab-3，可以使用：

$('#tabs').tabs('select','tabs-3')

Answer 4

您可以使用活动选项

$(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);

Answer 5

不用从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>