6

我有一个带有两个选项卡的页面，我希望能够使用 Javascript 进行切换，还可以page.html#tab1在 URL 中设置锚点（例如 ）以进行书签/链接。

默认情况下，选项卡内容在两个 div 中，一个在另一个之下，并且锚标签将滚动到正确的一个，禁用 JS。

使用JS启用，将应用CSS类以使其充当标签。每个选项卡都链接到每个锚点，但是当您单击切换选项卡时，页面会滚动到该选项卡。如果我从 onclick 函数返回 false，则 URL 不会更改为包含锚点。

如何使浏览器 URL 更改为page.html#tab1但不滚动到#tab1??

4

6 回答 6

5

我已经玩了一段时间了，因为我最初不相信你（我使用jQuery 历史插件来获得类似的行为）。

我很难过。我不认为你可以。作为一种解决方法，您可以做的是使用 javascript 将哈希设置为与页面上实际不同的值。然后在加载时使用 javascript 读取哈希并填充正确的内容。 我在我的网站上这样做。所以在那种情况下，没有 javascript 的用户会被滚动，有 javascript 的用户会保留历史链，只有当人们没有向有 javascript 的人发送链接时它才会变得古怪（反之亦然）。

于 2009-09-06T00:04:11.383 回答
1

快速破解：

var thehash = e.target.hash;
$(thehash).prop('id',thehash.substr(1)+'-noscroll');
window.location.hash = e.target.hash;
$(thehash+'-noscroll').prop('id',thehash.substr(1));

这会在更改 url 的哈希之前和之后更改 html 元素的 id。对我有用，但也可能会破坏一些东西。这可以防止浏览器在哈希更改时滚动，因为中间没有带有该 id 的 html 元素。

于 2013-01-19T17:46:07.767 回答
0

你能有一些 Javascript 来更改锚名称，设置 window.location.hash，然后将锚名称改回来吗？

（我已经确认 andynormancx 是正确的，并且设置 window.location.hash 会滚动视图，但是我懒得测试在 DOM 中创建锚点到 window.location.hash 是否也会滚动。）

于 2009-09-05T23:54:13.683 回答
0 
var Namespace = {
  var timer, scroll;
}

// Onclick
Namespace.scroll = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
Namespace.timer = setInterval(function() { scrollTo(0, Namespace.scroll) }, 100);
location.hash = this.href;
clearInterval(Namespace.timer);
于 2009-09-06T00:32:02.910 回答
0

我在这里找到了一个不错的解决方案：http: //lea.verou.me/2011/05/change-url-hash-without-page-jump/

在例如单击事件上使用 preventDefault

$('a').click((event) => {
    event.preventDefault();
    let hash = $(event.target).attr('href');
    history.pushState(null, null, hash);
    // The url now has a hash but the page won't jump to the given anchor
    // .. handle the rest (an easing scroll for example)
});
于 2019-12-11T16:38:37.530 回答
-1 
window.location.hash = 'tab1';

可能会奏效。

于 2009-09-05T23:28:07.603 回答