jquery bbq 从 url 中删除哈希 b答案

【问题标题】：jquery bbq remove hash b from urljquery bbq 从 url 中删除哈希 b
【发布时间】：2012-06-23 09:24:17
【问题描述】：

我是 jquery bbq 的新手，到目前为止我已经弄清楚了大部分设置，但我有一个小问题。这是设置。

右侧有主导航链接的页面每次导航链接单击都会将页面的正文内容更改为其相应的数据（显示和隐藏 div）（使用 bbq）其中一个链接显示一个带有另一组链接的 div，单击这些链接将在 url 中设置哈希 B

所以第一个链接点击 domain.com/dir/#A=page1

第二个链接点击 domain.com/dir/#A=page1&B=set1

如果我按下后退按钮，它会返回到之前的 A 哈希，但是 B 哈希仍保留在 url 中。

有没有办法在不在特定页面上时删除 B 权限？

$(window).bind('hashchange', function(e) {
    var state = $.bbq.getState('p');
    var graphState = $.bbq.getState('n');

    var base_title = '{/literal}{$smarty.const.SITE_TITLE}{literal} | Dashboard | ';
    $('.profile-nav a').each(function() {
        if (!state) {
            $('.profile-nav a').each(function() {
                $('#' + this.id).removeClass('live active');
                document.title = base_title + 'Message Center';
            });
            $('#m').addClass('live active');
        } else if (state == this.id) {
            $('#' + this.id).addClass('live active');
            document.title = base_title + $(this).text();
        } else {
            $('#' + this.id).removeClass('live active');
        }
    });

    if (!state) {
        $('.tab-content').fadeOut('fast');
        $('.message-content').fadeIn('slow');
    } else {
        $('.tab-content').fadeOut('fast');
        clicked = $('#' + state).attr('rel').split(' ')[0];
        $('.' + clicked).fadeIn('slow');
    }

    if (state == 'r') {
        if (graphState) {
            $('.nick-breakdown').fadeOut('fast');
            $('#' + graphState).fadeIn('slow');
            document.title = base_title + 'Reports | ' + $('#' + graphState).attr('rel');
        } else {
            $('.item-breakdown').fadeOut('fast');
            $('.nick-breakdown').fadeIn('slow');
            document.title = base_title + 'Reports';
        }
    }
});

【问题讨论】：

标签： javascript jquery jquery-ui jquery-bbq

【解决方案1】：

我使用 jsbbq.pushState 和 merge_mode = 2 完成了同样的事情，而不仅仅是在锚点上设置 #。

在此处查看文档：http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html#jQuery.bbq.pushState

merge_mode(Number) : 如果 merge_mode 不是，则合并行为默认为 0 指定（除非指定以 # 开头的哈希字符串，在这种情况下的合并行为默认为 2)，如下所示：

0：params 参数中的参数将覆盖当前状态的任何参数。

1：当前状态的任何参数都将覆盖 params 参数中的参数。

2：params 参数将完全替换当前状态。

所以如果你的链接看起来像：

mysite.com#A=page1&B=page2 你可以打电话

$.bbq.pushState({'A' : 'pageXYZ'}, 2);

您的文档位置将是：

mysite.com#A=pageXYZ

【讨论】：

工作得很好，由于某种原因很难理解文档，但现在很有意义。谢谢！

【解决方案2】：

我有一个更简单的方法，不需要插件：

将当前哈希参数复制到虚拟 URL AS searchParameters。现在您可以将哈希参数视为搜索参数，使用搜索参数（developer.mozilla.org/en-US/docs/Web/API/URLSearchParams）的所有功能对其进行编辑，然后将它们复制回作为 hasparameters，

例如设置和更新参数的简单函数，你也可以使用'.delete()'而不是'.set'来删除参数：

function setOrUpdateHashParameter( hashParameterName, hashParameterValue ) {
	let theURL				= new URL('https://dummy.com');				// create dummy url
	theURL.search			= window.location.hash.substring(1);		// copy current hash-parameters without the '#' AS search-parameters
	theURL.searchParams.set( hashParameterName, hashParameterValue );	// set or update value with the searchParams-API
	window.location.hash	= theURL.searchParams;						// Write back as hashparameters
}

如果有人知道如何正确格式化这些帖子，请随时编辑，谢谢！

【讨论】：