52

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

とは言っても、属性を として設定しhref、URL が文字に追加されるなどの望ましくない副作用とともにhref="#"、文字をプレースホルダーとして使用するか悪用します。##

また、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);
});

"#"コードをきれいにする代わりに、他に何を使用できますか..?

4

8 に答える 8

45

最善の解決策は、ダミーのプレースホルダーをまったく使用しないことです。リンクが実際にたどられた場合に、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;
});

この利点は数多くあります。あなたのサイトは、スクリーン リーダー、Web クローラー、および JavaScript をオフにしているユーザーがアクセスできます。また、JavaScript がオンになっているユーザーでも、ステータス バーに意味のある URL が表示されるため、どこに移動しているかがわかります。

于 2009-12-09T06:45:28.050 に答える
20

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

href="javascript:void(0);"

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

于 2009-12-09T06:04:51.943 に答える
8

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>
于 2009-12-09T06:19:52.317 に答える
3

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() の通常の動作を維持します。

于 2009-12-09T09:42:40.553 に答える
1

Maybe I don't get smething, but if there is no link, you just shouldn't use an <a /> element in the first place. Use some <span /> or attach event listeners to list elements. You can style these elements to have cursor: pointer; using CSS.

Remember that browsers have some special actions associated with links, like "open in new tab", "save target element" etc. When you use dummy href='' attribute these actions work in a broken way, so it's better to not use links at all.

On the other hand, if you are able to render content of these ajaxified parts as normal pages (and it makes sense), follow nickf's advice.

于 2009-12-09T09:32:39.150 に答える
1

ニックフは私を打ち負かしました。ただし、いくつか言及する必要があります。 リンクに「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;
});
于 2009-12-09T10:51:39.473 に答える
0

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

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

于 2009-12-09T06:23:17.663 に答える
0

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

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

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

于 2009-12-09T06:11:39.383 に答える