Jquery按url参数打开tab

时间:2014-07-05 22:52:25

标签: javascript jquery jquery-ui url tabs

我试图这样做当一个人输入像usercp.php #profile或usercp.php#settings这样的URL时,它会打开到该选项卡。另一个问题是,标签href是网站不同页面的所有网址。所以基本上,代码是这样的。

<div id="tabs">
  <ul class="usercptabs">
    <li><a href="#tabs-1">Account Summary</a></li>
    <li><a href="usercp.php?action=profile">Customize Profile</a></li>
    <li><a href="usercp.php?action=options">Settings</a></li>
    <li><a href="usercp.php?action=usergroups">Usergroups</a></li>
    <li><a href="usercp.php?action=editlists">Friends</a></li>
    <li><a href="usercp.php?action=drafts">Drafts</a></li>
    <li><a href="usercp.php?action=alert_settings">Alert Settings</a></li>
    <li><a href="usercp.php?action=subscriptions">Thread Subscriptions</a></li>
  </ul>

如何做到这一点?我在stackoverflow中尝试了不同的解决方案,但在这种情况下他们并没有真正起作用。

jQuery.noConflict();
jQuery(function() {
    jQuery("#tabs").tabs({
beforeLoad: function( event, ui ) {
      ui.panel.html('<center><img src="http://i.imgur.com/OZPnfSM.gif" /></center>');
  }
 });

});

1 个答案:

答案 0 :(得分:0)

window.location对象包含有关网址的所有信息,其中一个属性为hash

因此,您可以执行以下操作,触发匹配选项卡上的点击:

jQuery(function ($) {

    /* your tab init code */    

    var hash = location.hash;
    if (hash && hash != '#') {
        hash=hash.substr(1); /* remove the "#" */
        $('#tabs a').filter(function () {
            return $(this).attr('href').indexOf(hash) > -1;
        }).click();/* click the matching tab */
    }
});

此解决方案假定将使用的哈希值将匹配url的查询字符串中的action param。您有一个匹配问题profile,另一个只关闭settings。如果它们不完全匹配,则需要进一步细化