0

このフィドルを見てください：

http://jsfiddle.net/contendia/GBTAS/

アイデアは、js を実行できるときにのみタブを作成することで、非 js ユーザーにとって使いやすいページを維持することです。それ以外の場合は、ページを単なる div のスタックとして表示したいと考えています。タブのリストは、タブの数に応じて完全に自動化され、各タブには対応する divs id 属性に従って名前が付けられます。

すべてがうまく機能していますが、現在、クリックイベントを作り直して、タブをより一般的にナビゲートしようとしています。以前は、リスト アイテム タブ (li) の 1 つでクリック イベントを探し、必要なコードを実行してタブを変更しました。

しかし今、この関数をより一般的なものにして、ユーザーが実際のタブをターゲットにすることなく、タブ ID の 1 つに等しいハッシュ値を持つ任意のアンカーをクリックしたときに機能するようにしたいと考えています。アンカー内のハッシュをターゲットにして、タブ ID に対してテストする方法が正確にはわかりません。私が持っている関数は、FF と IE で、タブのクリックとアンカー リンクのクリックの両方で機能します (例: <a href="#tab1">Tab 1</a>)。ただし、タブがビューポートよりも長い場合、タブの上部がウィンドウの上部までスクロールするため、タブ リンクが表示されなくなります。別のタブに移動するには、タブ リンクを手動でスクロールして表示に戻す必要があります。ページを元の位置に戻すために .scrollTo() を試しましたが、うまくいきませんでした。

これは .scrollTo の問題ですか、それともクリック機能についてすべて間違っていますか?

アイデアをいただければ幸いです。おまけ、アニメ化してくれたら最高。

http://jsfiddle.net/contendia/GBTAS/

4

1 に答える 1

0

わかりました、どうぞ..これはあなたにはうまくいかないと聞きましたが、私には完全に機能します。これは、タブ リンクにヒットしたときに起動するクリック ハンドラーであり、ご覧のようにハッシュが追加されます。「scrollTo()」がなければ、スクロールはあなたが説明したとおりです...それで、問題はなくなります。何らかの理由で href を設定すると、ブラウザのビューポートがスクロールすると結論付けます。

j('#tabs ul li a').click(function () {
    location.hash = j(this).attr('href');
    window.scrollTo(0, 0);
}); // Add click handler to set # in address bar
于 2011-11-04T11:45:16.680 に答える