javascript - 在 href 属性中使用 "#"的替代方法

标签 javascript html href

<分区>

<a>标签用于创建超链接,但在这个 jQuery 和 Ajax 时代,我们使用它来将 HTML 加载到 <div> 中。与 <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);
});

我还能用什么代替 "#"使我的代码整洁..?

最佳答案

最好的解决方案是根本不使用一些虚拟占位符。使用有意义的 URL,如果链接被实际访问,它将向您显示您从 AJAX 请求中获得的信息。

我经常使用我的网络应用程序执行此操作,使用 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,这样他们就会知道他们要去哪里。

关于javascript - 在 href 属性中使用 "#"的替代方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1871874/

相关文章:

html - 如何将内容传递到 Wordpress 中的不同模板部分(分屏)

java - 从 jsoup 的嵌套 href 检索数据

php - 使用自动对焦打开模态弹出窗口

javascript - 使用 curry 递增一个值,直到它等于另一个值

html - 显示帮助文件的推荐方式是什么?

javascript - 在 html 中显示 RTSP 流

php - 如何通过 href 标签传递变量

javascript - select2 插件事件后从选项列表中删除项目

javascript - 你如何获得鼠标的位置并在其旁边放置一个元素?

javascript - 使用 'window' 、 'document' 和 'undefined' 作为包装 jQuery 插件的匿名函数中的参数