3

私は現在、自分のWebサイトのさまざまなセクションへのリンクを多数含むWebサイトを構築しています（ナビゲーションとも呼ばれます）。それらのリンクとそれに対応するページをlink1 、page1、link2、page2、link3、page3などと呼びましょう。

それらの一般的なコードは次のとおりです。

<a href="/page1.html">Link1</a>

<a href="/page2.html">Link2</a>

<a href="/page3.html">Link3</a>

ユーザーに各リンクをクリックして対応するWebページに移動してもらいたいのですが、想定どおりに機能します。問題は、ユーザーがクリックしたリンクと同じページにいるときにリンクが何もしないようにしたいことです（つまり、ページをリロードするだけです）。例を使用して、これを明確にしましょう。

現在の使用：ユーザーはページ1にいます。ユーザーがlink1をクリックします。ブラウザはpage1をリロードします。
望ましい使用法：ユーザーはページ1にいます。ユーザーがlink1をクリックします。ブラウザは何もしません。

TL;DR基本的に私はif句を探しています。マークアップ言語であるという理由だけでHTMLにif句がないことを読みましたが、これを実装する別の方法は何ですか？ご協力いただきありがとうございます。

4

4 に答える 4

4

SO をむしゃむしゃ食べた後、JQuery や JS を使用する必要なしに私が見つけた最良の答えは、Matt Crinklaw-Vogt による答えです。

/#! を追加します。これにより、上部へのスクロールが防止され、ページのリロードも防止されます。コード：

<a href="/page1.html/#!">Link1</a>

元の答え:

JavaScript をトリガーするリンクがクリックされたときに Web ページが一番上にスクロールしないようにするにはどうすればよいですか?

于 2012-10-29T10:52:46.673 に答える
1

気に入るかどうかわかりませんが、空のブックマークを使用してこれを行うことができます...

<a href="/page1.html#">Link1</a>

page1 にいない場合は page1 が読み込まれますが、そこにいると何もしません。

于 2012-10-29T10:06:36.117 に答える
0 
<a href="#">Link2</a>

OR

 <a onclick = "return false;">Link2</a>

That cancels out the load.

On page load, you could use JS as follows

<a href="/page1.html" id="link1">Link1</a>

JS:

document.getElementById("link1").setAttribute("href", "#");
于 2012-10-29T10:06:52.310 に答える
0

JavaScript を使用して現在の URL をアンカー リンクと比較し、同じ場合はデフォルトのクリック イベントを防止します。jquery の使用:

var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('a').each(function(){
    if(urlRegExp.test(this.href.replace(/\/$/,''))) {
        $(this).click(function(event) {
            event.preventDefault();
        });
    }
});
于 2012-10-29T15:30:28.960 に答える