使用 JQuery 使 href 链接可点击答案

【问题标题】：Make href link clickable using J-Query使用 JQuery 使 href 链接可点击
【发布时间】：2014-06-25 21:23:43
【问题描述】：

我正在使用 jquery 菜单，当我单击菜单中的链接之一时，我希望使其可点击。例如，如果我单击报告链接，我想打开另一个 asp.net 页面，我该怎么做？这是我的 j-query 菜单：

 <script type="text/javascript">
      $(function () {
          $("#menu").menu();
      });
  </script>
  <style type="text/css">
  .ui-menu { width: 150px; }
  </style>


 <ul id="menu">  
        <li><a href="#">Report</a></li>
</ul>

所以当我单击报告菜单时，我想打开此页面 Main_Report.aspx。谢谢

【问题讨论】：

使用按钮代替标签
$('#menu li a').click(function(){//yourfunction here});
@KuashalKhamar：……女演员对主教说。此外，如果答案是按预期使用 href 属性，真的需要小提琴吗？ :)
Methinks SO 需要劝阻人们不要寻求小提琴链接。它们可能在正确的时间有用，但人们要求它们的频率已经超出了开玩笑的范围
作为最佳实践，最好在提问时包含一个 Fiddle。不疼，而且在很多情况下都有帮助。但是，由于 moe 确实发布了代码（而且这是一个直截了当的问题），我认为这并不重要。

标签： javascript jquery html asp.net

【解决方案1】：

你不需要 jQuery 来为你做这些。只需将url放在链接的href属性中...

<a href="Main_Report.aspx">Report</a>

如果出于某种无法解释的原因，您需要使用 jQuery 来完成，那么只需在创建菜单后添加它...

$("#menu").find("a:contains(Report)").attr("href", "Main_Report.aspx");

这将找到包含“报告”一词的链接标签，并将 href 属性设置为报告页面。

注意：根据下面 Flater 的评论，最好有一个类或 ID 来引用链接。我用contains() 建议的方式不是最佳的，但会起作用。

【讨论】：

但公平地说，如果您在通过 jQuery 查找内容时开始使用类或 id，它会更好、更容易。并不是说您的解决方案无效，但我会选择建议基于类/id 的方法 :)
是的，我当然同意这样会更好。链接非常适合唯一 ID，但在这种情况下，我只是按原样回答这个直接问题。
我知道 :) 这更多的是作为 OP 的提示，而不是纠正你 :) 我想我可以换个说法。
我明白 - 我自己也这样做。但是，您有时不知道要走多远，除非为某人重建网站：p
我每天在 SO：media.giphy.com/media/dZXOXsWBkoN3y/giphy.gif 上都会有几个这样的反应。我开玩笑 :) 但仍然 ;)

【解决方案2】：

请使用以下代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
     <script type="text/javascript">
        $(document).ready(function () {
         $("#menu li a:contains(Report)").click(function () {
             if ($(this).attr("href") == "#") {
                 $(this).attr("href", "Main_Report.aspx");
             }
         });
     });
      </script>
       <style type="text/css">
      .ui-menu { width: 150px; }
      </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <ul id="menu">  
            <li><a href="#">Report</a></li>
    </ul>
    </div>
    </form>
</body>
</html>

【讨论】：

不需要两个js版本你可以使用一个版本。
基本上我有旧版本的 js 文件，我用过它，但你可以使用任何 js 文件。 1->min.js 适用于网站（在线） 2->.js 适用于需要阅读、了解或/和理解 jquery 代码的开发人员，即插件开发（离线，本地工作）

【解决方案3】：

由于你使用的是锚标签<a>，所以你可以使用href=''属性：

<ul id="menu">  
    <li><a href="Main_Report.aspx">Report</a></li>
</ul>

或者如果你想要一个 js 解决方案，那么试试这个：

$('#menu a').click(function(){
    var url = window.location.href;
    var nUrl = url.substr(0, url.lastIndexOf('/')+1);

    window.location.href = nUrl + 'Main_Report.aspx';
});

【讨论】：

window.location.href = "main_report.aspx" - 您不需要任何字符串操作即可转到相对地址。

【解决方案4】：

正如弓箭手所说，您可以简单地浏览锚标签本身..无论如何这是我的尝试 HTML

<ul id="menu">  
        <li><a href="#">Report</a></li>
</ul>

jQuery

 $(document).ready(function(){
$("#menu").find('a').click(function(e){
    e.preventDefault();
   window.location.href="youurl.html";
});
});

【讨论】：