使用jQuery在新窗口中打开所有外部链接
jQuery 是一个 JavaScript 库,它使得 HTML 文档遍历、操作和动画变得简单。在新窗口中打开所有外部链接是 jQuery 的一个常见应用,这有助于提高网站的可访问性和用户体验。
以下是在 HTML 文件中使用 jQuery 打开所有外部链接的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery External Links Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>jQuery External Links Example</h1>
<a href="https://www.example1.com" class="external-link">Example 1</a>
<a href="https://www.example2.com" class="external-link">Example 2</a>
<a href="https://www.example3.com" class="external-link">Example 3</a>
<script>
$(document).ready(function () {
$('.external-link').click(function () {
window.open($(this).attr('href'), '_blank');
return false;
});
});
</script>
</body>
</html>
这个示例展示了如何使用 jQuery 在新窗口中打开外部链接。首先,在 HTML 文件中添加一个外部链接,并使用 CSS 类 external-link
为每个链接应用样式。然后,在 jQuery 文件中编写脚本,使用 click
事件监听器捕获链接的点击事件。当链接被点击时,jQuery 会使用 window.open
打开链接,并阻止默认行为,以防止链接在新窗口中打开。
这个示例展示了如何使用 jQuery 在新窗口中打开外部链接,并提供了基本的样式和交互性。您可以根据您的需求进一步定制这个示例,以适应您的网站设计。
1.内部链接(当前文档与目标文档在同一站点内); 2.外部链接(当前文档与目标文档不在同一站点内); 3.E-mail链接(并允许访问者向指定的地址发送邮件); 4.锚点连接 跳转到同一网页或其他文档的指定位置:创建锚点,显示内容链接锚点,显示内容; 5.空链接,就是没有目标端点的链接,显示内容; 6.脚本链接:是一种特殊的链接,当单击设置脚本链接的文本或图像时,可以运行相应的JS语句。
一、何为超链接 1.a标签 在HTML中,使用a标签来实现超链接。 (1)语法格式 文本或图片 ① 说明 href表示想要跳转到的那个页面的路径,可以是相对路径,也可以是绝对路径。 我们可以将文本设置为超链接,即文本超链接;也可以将图片设置为超链接,即图片超链接。 (2)示例 ① 例1-文本超链接 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <