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

【问题标题】：Set the Jquery tab as active if a parameter is set如果设置了参数，则将 Jquery 选项卡设置为活动状态
【发布时间】：2014-06-16 11:18:03
【问题描述】：

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

我该怎么做？

【问题讨论】：

我猜你会在这里找到一些解决方案stackoverflow.com/a/21860793/5480737

标签： javascript php jquery tabs

【解决方案1】：

Working Demo

试试下面的 sn-p ：

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

});

【讨论】：

【解决方案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
    }
});

【讨论】：

【解决方案3】：

您可以使用active option

$(document).ready(function () {
    if (window.location.search) {
        $("#tabs").tabs({
            active: 2 //0 based index
        }); // want to set tab-3 as selected or active
    }
});

如果您想在创建标签小部件后更改活动标签，您可以使用option method 喜欢

$("#tabs").tabs('option', 'active', 2);

【讨论】：

【解决方案4】：

对于通过代码选择tab-3，您可以使用：

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

【讨论】：

【解决方案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>

【讨论】：