javascript - 使用jQuery单击链接时如何使浏览器转到带有查询字符串的URL？

Question

假设现在我在下面http://mysite.com/index.html，index.html 包含下面的 html：

    <ul>
        <li><a data="value">Link1</a></li>
        <li><a data="value2">Link2</a></li>
        <li><a data="value3">Link3</a></li>
    </ul>

我希望：

当我单击 Link1 时，浏览器将转到http://mysite.com/mypage.jsp?q=value

当我单击 Link2 时，浏览器将转到http://mysite.com/mypage.jsp?q=value2

如何使用 jQuery 实现这一点？

非常感谢。

Answer 1

像这样 ：

$("a[data]").click(function(e) { 
   //added the data attribute to the selector 
   //prevent default href action
   e.preventDefault();
   //change url
   location.href = "http://mysite.com/mypage.jsp?q=" + $(this).attr("data");
});

或者只是你的 HTML 可能变成这样：

<ul>
  <li><a href="http://mysite.com/mypage.jsp?q=value">Link1</a></li>
  <li><a href="http://mysite.com/mypage.jsp?q=value2">Link2</a></li>
  <li><a href="http://mysite.com/mypage.jsp?q=value3">Link3</a></li>
</ul> 

Answer 2

也许只需将 href 添加到您的链接，这样即使没有 javascript/jquery 也可以使用

如果你真的想要一个 javascrip 解决方案，你应该使用

// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";

如果你想要一个 jquery 解决方案

var url = "http://stackoverflow.com";    
$(location).attr('href',url);

Answer 3

$("a[data]").click(function(){
   e.preventDefault();
   window.location.href = "http://mysite.com/mypage.jsp?q=" + $(this).attr("data");
});