Question

以下代码是测试件。通常，链接中的href将指向“http://www.google.com/”，但attr应将其更改为引用“http://maps.google.com”但是，引用不会更改。谁能告诉我它为什么不起作用？感谢

<html>
<head>
<script type="text/javascript">
$("a#changeme").attr('href', 
'http:\/\/maps.google.com/');
</script>
</head>
<body>
<div class="content">
<p>Link to <a href="http://www.google.com/" 
id="changeme">Google</a>
in the content...</p>
</div>
</body>
</html>

Answer 1

未加载jQuery。
如果是，则必须将其包装在$(document).ready处理程序中。
这可以在没有jQuery的情况下完成。

代码：

window.onload = function() {
    document.getElementById("changeme").href = 'http://maps.google.com/';
};

onload处理程序与DOMContentLoaded处理程序并不完全相同，但它有更好的支持，可能在此处首选。或者，您可以将<srcipt>块移动到<body>的末尾，然后使用不带任何onload处理程序的方法：

<body>
<div class="content">
<p>Link to <a href="http://www.google.com/" id="changeme">Google</a>
in the content...</p>
</div>
<script type="text/javascript">
  // This code is placed after the element, so the reference does exist now.
  // In the head, the same code will throw an error, because the body doesn't
  // even exist.
  document.getElementById("changeme").href = 'http://maps.google.com/';
</script>
</body>

Answer 2

脚本位于标题中，因此它在加载其他内容之前执行（如果jQuery甚至处于活动状态，则看不到对它的引用）。你应该将它放在一个函数中，然后稍后调用它（例如通过onload或计时器）。我还可以考虑浏览器中的安全功能，以防止网站在您点击它们之前操纵链接。

Answer 3

以下是正确的jQuery方法的代码（使用文档准备好）。

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#changeme").attr('href', 'http:\/\/maps.google.com/');
});
</script>
</head>
<body>
<div class="content">
<p>Link to <a id="changeme" href="http://www.google.com/">Google</a>
in the content<a href="test">test</a>...</p>
</div>
</body>
</html>

更改href链接的内容

3 个答案: