6

Javascriptで切り替えることができるようにしたい2つのタブがあるページがありpage.html#tab1ますが、ブックマーク/リンク用のURLにアンカー（例）を設定します。

デフォルトでは、タブの内容は上下に2つのdivにあり、アンカータグはJSを無効にして正しいものにスクロールします。

JSを有効にすると、CSSクラスが適用されてタブとして機能します。各タブは各アンカーにリンクしていますが、クリックしてタブを切り替えると、ページがタブにスクロールします。onclick関数からfalseを返すと、アンカーを含むようにURLが変更されません。

page.html#tab1ブラウザのURLをに変更し、スクロールしないようにするにはどうすればよいです#tab1か？

4

6 に答える 6

5

最初はあなたを信じていなかったので、私はしばらくこれで遊んでいました（私はjQuery履歴プラグインを使用して同様の動作を取得します）。

そして、私は困惑しています。私はあなたができるとは思わない。回避策としてできることは、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

アンカー名を変更し、window.location.hashを設定してから、アンカー名を元に戻すJavascriptを入手できますか？

（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 に答える