JavaScriptアンカー-別のHTMLページのIDへのアクセス

StackOverflow https://stackoverflow.com/questions/269566

  •  06-07-2019
  •  | 
  •  

質問

2つのhtmlページがあります。最初のhtmlで何かをクリックすると、2番目のhtmlに移動します。私がやりたいのは、最初のhtmlをクリックした内容に応じてテキストを表示することです。異なるテキストは異なるIDでラップされます。私が書いた方法は次のとおりです。

<a href="secondpage.html#one"></a>
<a href="secondpage.html#two"></a>
<a href="secondpage.html#three"></a>

two.htmlがid＆quot; one＆quot;のテキストを読み込むことを期待していますが、機能しません。私が間違ったことを知っている人はいますか？

2ページ目のコードは次のとおりです。

<ul id="menu" class="aaa">
    <li><a id="one" href="#">one</a></li>
    <li><a id="two" href="#">two</a></li>
    <li><a id="three" href="#">three</a></li>
</ul>

そして、各IDを変更するJSファイルがあります：

$("one").observe('click', function() {
    $('Pic').writeAttribute('src',"picone.jpg");
    $('Bio').update("texthere!");
});

2つと3つに同じ。

今すぐ最初のページのボタンをクリックすると、常に表示されます どのボタンをクリックしても、「1つ」のテキストと写真。

しかし、「2」の写真とテキストを見たいです。クリックすると

役に立ちましたか？

解決

やりたいことは、ページがロードされたときにアンカーをクリックすることをシミュレートすることです。 jQueryを使用しているため、最も単純なアプローチ（ただし、これまでの方法が最適）は次のようになります。

$(window).observe('domready', function () {
    $(location.hash).click();
});

ondomready-eventをウィンドウに添付します。 id = oneの要素をフェッチします（jQueryの場合、これはlocation.hashと同じ '#one'になり、この場合非常に便利です）。クリックします。

$（location.hash）.click（）;を置き換える必要がある場合があります。 jQueryはjQueryオブジェクトの配列を返す傾向があるため、$（location.hash）.get（0）.click（）を使用します。

しかし、あなたの場合のより良い解決策は、手動でトリガーできるイベントハンドラーを用意して、イベントを発生させる必要性を回避し、アンカーをドロップしてliにonclickを直接置くことです。

さらに、コンテンツを動的に表示/非表示したいだけのときに、なぜ2ページ目を読み込むのですか？同じページで行う...

他のヒント

#blastuffblaはIDではなく、場所のハッシュです。 以下を使用してアクセスできます。

self.document.location.hash

#hashを返します。使用するハッシュのみが必要な場合：

self.document.location.hash.substring(1)

これが役立つことを願って

タグには、URLではなくIDがあり、URLでアンカーを処理するための名前がありますが、JSでそれらを管理するにはIDが必要です。 リストは次のようになります。

<ul id="menu" class="aaa">
<li><a id="one" name="one" href="#">one</a></li>
<li><a id="two" name="two" href="#">two</a></li>
<li><a id="three" name="three" href="#">three</a></li></ul>

あなたのjavascriptは正しいように見えました。

＆quot;異なるID＆quot;と言うとき2ページ目にアンカーをどのように設定していますか？ 2ページ目のアンカーは次のようになります。

<a name='one'></a>

2ページ目にマークするテキストのすぐ上にこれを配置します。

ページをスクロールして、ID「1」の位置に移動しますか？ページのコンテンツが小さすぎてスクロールできない場合があります。つまり、ブラウザはidでマークされた要素をキャンバスの最上部に移動できず、そこでスクロールしたように見えることがあります。要素の後にブラウザの上部までスクロールできるように十分なスペースを含めるようにしてください。

役立つこと。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top