☰

href 属性で「#」を使用する代替手段 [重複] 質問する

tag-icon • tag-icon javascript html href
href 属性で「#」を使用する代替手段 [重複] 質問する

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

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);
});

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

ベストアンサー1

最善の解決策は、ダミーのプレースホルダーをまったく使用しないことです。リンクを実際にたどると、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 が表示されるため、ユーザーはどこに移動するかがわかります。

おすすめ記事