web-dev-qa-db-ja.com

href属性で「＃」を使用するための代替手段

重複の可能性：
JavascriptリンクのHref：「＃」または「javascript：void（0）」？

<a>タグはハイパーリンクを作成するために使用されますが、jQueryとAjaxのこの時代では、HTMLを<div>タグと同じページの<a>sにロードするために使用しています。

つまり、href="#"文字をプレースホルダーとして使用するか、むしろ乱用することで、href属性を#として設定し、#文字が付加されたURLのようないくつかの望ましくない副作用を伴います。

また、href属性を空のhref = ""のままにすると、リンクが機能していないように見えます。

とにかく、ユーザーがリンクの上にカーソルを置いたときに、プログラマーが意図したとおりにリンクを実行させるときに、ブラウザーのステータスバーにテキストまたはダミー関数を表示するような、よりきれいな方法でこれを行う方法はありますか？

これが私のコードです。

<ul id="sidebarmenu1">
   // List that is converted into a menu... 
   <li> <a href="#" id="loadHotel" > HOTEL </a> </li>
   <li> <a href="#" id="loadCountry"> COUNTRY </a> </li>
   <li> <a href="#" id="loadCity"> CITY </a> </li>
</ul>

// The jQuery to load content into another div with Ajax
var loadUrl = "createHotel.php";
$("#loadHotel").click(function() {
    $("#mainContent").html(ajax_load).load(loadUrl);
}); 

// ajax function to load hotel ---> rooms page 

var url_loadRooms = "viewRooms.php";
$("#createRooms").click(function() {
    $("#mainContent").html(ajax_load).load(url_loadRooms);
});

"#"の代わりに他に何を使用してコードをきちんと整えることができますか？

javascripthtmlhref
45
SpikETidE

最善の解決策は、ダミーのプレースホルダーをまったく使用しないことです。リンクが実際にたどられた場合に、AJAXリクエストから取得した情報を表示する意味のあるURLを使用します。

私は自分のWebアプリでこれを定期的に行い、JavaScriptを使用して作業サイトを強化しています。たとえば、HTML：

<a href="/users/index" rel="popup">View users</a>

JavaScript（jQuery）：

$('a[rel*="popup"]').click(function() {
    loadPopup({    // whatever your favourite lightbox is, etc..
        url: this.href
    });
    return false;
});

これには多くの利点があります。 JavaScriptをオフにすると、スクリーンリーダー、ウェブクローラー、ユーザーがあなたのサイトにアクセスできるようになり、JavaScriptをオンにした場合でも、ステータスバーに意味のあるURLが表示されるので、ユーザーは目的地を知ることができます。

42
nickf

私は通常これを使用します：

_href="javascript:void(0);"
_

アンカーのhref属性をjavascript:void(0);に設定すると、このアンカーは別のドキュメントまたはアンカーへのハイパーリンクではないことがブラウザに示されます。

16
Andrew Hare

onclickハンドラーがfalseを返す場合、ブラウザーはリンクをたどりません。これを試して：

<a href="#" onclick="alert('No # in the address bar!'); return false;">Click Me</a>

編集：

オクトソープを使用しないことで完全に混乱している場合（つまり、#記号）、必須ではありません。これを試して：

<a href="" onclick="alert('No change in the address bar!'); return false;">Click Me</a>
7
Asaph

なぜhrefで何かを定義する必要があるのですか？

これがSO動作する方法です>

<a id="close-question-1871874" title="closes/opens question for answering....">
  close<span title="3 more vote(s) needed to close this question"> (2)</span>
</a>

しかし-リンクが実際にどこかに移動することになっている場合-通常のhrefを維持する
そしてjQueryでのe.preventDefault（）の通常の動作のみ。

2
Arnis Lapsa

nickf 私を倒してください。ただし、いくつか言及する必要があります。 リンクに「javascript」プロトコルを使用しないでください （おそらくブックマークレットにするつもりでない限り）。プログレッシブエンハンスメントの反対です。可能な場合は常に、href属性を実際のURIリソースにして、適切に低下できるようにする必要があります。他のすべての状況では、「＃」が推奨され、適切なJavaScriptを使用して、ページが上部にスクロールされないようにする必要があります。これを行うには2つの方法があります。クリックハンドラーで、デフォルトのアクションを防止するか、falseを返します。

$('a[rel*="popup"]').click(function(e) {
    e.preventDefault();
    loadPopup({url: this.href});
});

または

$('a[rel*="popup"]').click(function() {
    loadPopup({url: this.href});
    return false;
});
1
Justin Johnson

たぶん私はsmethingを取得しませんが、リンクがない場合は、最初に<a />要素を使用しないでください。いくつかの<span />を使用するか、イベントリスナーをアタッチして要素をリストします。 CSSを使用して、これらの要素にcursor: pointer;を設定できます。

ブラウザには、「新しいタブで開く」、「ターゲット要素を保存」など、リンクに関連付けられたいくつかの特別なアクションがあることに注意してください。ダミーのhref=''属性を使用する場合、これらのアクションは正常に機能しないため、使用しないことをお勧めしますまったくリンクします。

一方、これらのajax化された部分のコンテンツを通常のページとしてレンダリングできる場合（そしてそれが理にかなっている場合）は、 nickfのアドバイス に従ってください。

0
pawel

「＃」文字をプレースホルダーとして使用すると、基本的にリンクが「アクティブ」になります。ブラウザはそれを別のものを指すタグとして解釈します。 hrefが空の場合、ブラウザはaタグが別のタグであると想定します。

これを回避するには、タグの同じ機能をエミュレートする別のタグにCSSを割り当てます。マウスを置いたときに、マウス、下線、色などを変更します。ウィンドウのステータスを簡単に変更して、ユーザーが実際にはリンクをクリックしていないにもかかわらず、クリックイベントのようにリンクをクリックしているように見せることができます。 。

実際、JavaScriptなしでは使用できないイベントバインディングを介してJS関数のみを実行することは、そもそもリンクとは見なされないため、これがより良いオプションです。

0
Jeff Rupert

私はいつもこれを使います：

<a href="javascript:;">Click to your heart's delight</a>

0
leepowers