使用jQuery给链接添加锚点

Question

我是一名 JavaScript 的初学者。 需要使用 JavaScript 或 jQuery 动态地在客户端将一个锚点（例如：#page1）添加到列表中所有链接中，并删除任何现有的锚点（例如：#page33）：

初始 HTML（从服务器传输）：

<ul id="lang_menu">
    <li><a href="home.php?lang=eng#page33">English</a></li>
    <li><a href="home.php?lang=tam#page33">Tamil</a></li>
    <li><a href="home.php?lang=sin#page33">Sinhala</a></li>
</ul>

这应该像这样运行（在客户端将#page33替换为#page1）：

<ul id="lang_menu">
    <li><a href="home.php?lang=eng#page1">English</a></li>
    <li><a href="home.php?lang=tam#page1">Tamil</a></li>
    <li><a href="home.php?lang=sin#page1">Sinhala</a></li>
</ul>

我需要这个网站开发。

请帮帮我。先谢谢了...

- user2444417

---

为什么不把它们放在源代码中呢？ - Niet the Dark Absol

锚点是客户端的ajax页面请求...这就是我需要它的地方：www.lrh-hospital.health.gov.lk - user2444417

Answer 1

试试这个方法：

$(function () {
    $('#lang_menu li a').attr('href', function (_, oldHref) {
        return oldHref + "#page1";
    });
});

演示

对于您更新的问题，您可以尝试以下方法：

使用正则表达式替换URL中的#部分。

$(function () {
    $('#lang_menu li a').attr('href', function (_, oldHref) {
        oldHref =  oldHref.replace(/\#(.*)/g, "#page1");
         if(oldHref.indexOf('#') == -1)
            oldHref += "#page1";
        return oldHref;
    });
});

Demo2

- PSL

---

谢谢，它可以工作，但是我该如何删除任何现有的锚点并插入新的锚点？因为在点击几次后，它会变成类似于“home.php?lang=eng#page1#page3#page1#page2#page2”的东西。 - user2444417

我不明白为什么你要在点击事件上添加内容？你能分享一个 fiddle 吗？ - PSL

我还发现了一种不太简单的方法来删除锚点：返回 oldHref.split("#")[0] + "#page1"; - user2444417

Answer 2

如果你处理大量的DOM元素，最好懒加载添加锚点。

jQuery("a").bind("click", function(e) {
  e.preventDefault();
  document.location = jQuery(this).attr("href") + "#page1";
});

- j_mcnally

---

呃，如果我尝试中键单击它会发生什么？ - Niet the Dark Absol