首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用jQuery在新窗口中打开所有外部链接

使用jQuery在新窗口中打开所有外部链接

jQuery 是一个 JavaScript 库,它使得 HTML 文档遍历、操作和动画变得简单。在新窗口中打开所有外部链接是 jQuery 的一个常见应用,这有助于提高网站的可访问性和用户体验。

以下是在 HTML 文件中使用 jQuery 打开所有外部链接的示例代码:

代码语言:html
复制
<!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 在新窗口中打开外部链接,并提供了基本的样式和交互性。您可以根据您的需求进一步定制这个示例,以适应您的网站设计。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用 jQuery 新窗口打开外部链接

我们一般都希望新窗口打开外部链接,这样用户就不需要离开网站就能访问外部链接,但是如果每个外部链接都手工加上新窗口打开的属性(target="_blank")的话,会让人非常抓狂。...使用 jQuery,我们只需要几行代码就能在新窗口打开外部链接。 1....找到外部链接 首先我们需要找到所有外部链接 $(document).ready() 函数添加如下代码: $("a[href*='http://']:not([href*='"+location.hostname...让外部链接新窗口打开 如果你想外部链接新窗口打开,继续增加如下一行代码: $("a[href*='http://']:not([href*='"+location.hostname+"']),[href...target 属性,并且给他赋值为 _blank,这样外部链接就能在新窗口打开

2.6K20

Typecho实现外部链接添加nofollow标签和新窗口打开

我们使用Typecho程序建站过程,在编辑文章的时候如果希望引导外部的文章地址,那我们肯定是需要用到nofollow标签,这样不至于将本网站的权重被带跑。...不过我们使用Typecho的时候默认的还是在当前窗口打开的,我们很多时候希望新窗口打开,那就需要手工设置。...有没有不需要每次手动设置Typecho 实现外部地址自动nofollow,以及新窗口打开的方法呢?省的每次有些时候会忘记掉,这里老蒋找到网上的一个办法,如果我们还有需要的话可以参考使用到。...self->makeHolder("{$escaped}"); }, $text ); 把代码的...->makeHolder("{$escaped}"); } 看到代码没有,我们更换成nofollow,以及_blank新窗口打开

97110

使用VBA工作表列出所有定义的名称

然而,如果名称太多,虽然有名称管理器,可能名称的命名也有清晰的含义,但查阅起来仍然不是很方便,特别是想要知道名称引用的区域时,如果经常要打开名称管理器查找命名区域,会非常麻烦,也浪费时间。...下面是一段简单的代码,它将列出工作簿所有定义的名称,并显示名称所指向的单元格区域。...Set wks = Sheet1 '忽略错误 On Error Resume Next '遍历名称 For Each nm In Names '列...A列出名称 wks.Range("A" & Rows.Count).End(xlUp)(2) = nm.Name '列B列出名称指向的区域 wks.Range...(xlUp)(2) = "'" & nm.RefersTo Next nm '恢复错误触发 On Error GoTo 0 End Sub 一个非常简单的过程,它将显示工作簿所有名称及命名区域

6.4K30

使用链接服务器异构数据库查询数据

链接到一种数据库需要使用相应的接口。微软为很多数据库提供了驱动接口,所以可以直接使用,但是对于没有提供驱动的数据库比如Sybase,则需要在服务器上安装对应数据库厂商提供的驱动。...使用SSMS或者使用T-SQL语句配置成功链接服务器后便可通过: [服务器名].[数据库名].[架构名].[对象名] 的形式来访问数据库。...但是当Oracle的这个表数据量较大,比如有几十万行或者几百万行时,这个查询将会耗费很长时间。SQL Server运行该脚本可能要等上10秒、20秒或者1分钟、5分钟才可能查询出结果。...但是如果将脚本Oracle服务器上直接运行,则1秒钟不到就查询出结果了。造成这种情况的是SQL Server查询链接服务器的机制。 不同的数据库对应的SQL语言是有所不同的。...query'链接服务器执行的查询字符串。该字符串的最大长度为8KB。

4.3K10

JQuery文件上传插件ajaxFileUploadAsp.net MVC使用

0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比较多...,我把我自己使用的ajaxFileUpload文件上传到博客园上了,想要使用的朋友可以下载:http://files.cnblogs.com/files/fonour/ajaxfileupload.js...filePicture" name="filePicture" accept=".jpg,.jpeg,.png,.bmp" onchange="filePictureChange()" /> 通过accept可以限定打开文件选择对话框后...return decimal.Round(decimal.Divide(bytes, mbLength), 2).ToString() + "MB"; } 2 ajaxFileUpload使用过程的一些问题...解决方法: 经测试handlerError只jquery-1.4.2之前的版本存在,以后版本中都没有这个函数了,因此将handleError这个函数复制到ajaxFileUpload.js,就行了

3.1K90

浏览器怎么打开微信客户端连接服务器,微信“请在微信客户端打开链接”怎么办?-浏览器打开微信链接的方法 – 河东软件园…「建议收藏」

自从出现了电脑版的微信之后,很多用户都会在电脑中下载安装一个客户端,可就是电脑客户端打开链接也会出错!...微信中有的时候朋友或是公众号会发送一些链接,若是使用电脑单击打开就会被提示“请在微信客户端打开链接”,可是自己使用的就是电脑客户端,并且更换浏览器也不能解决这个现象,这是怎么一回事呢?...因为微信中是自动设置了使用默认浏览器打开的,无法识别的时候自然就不能打开了,我们可以微信中直接将这个功能关闭!...4、此时我们就可以最下方找到有关浏览器的设置了,将“使用系统默认浏览器打开网页”取消勾选并保存即可!...通过这几个简单的操作步骤就可以解决微信中出现的“请在微信客户端打开链接”的提示了,完成了设置之后重新单击链接并选择浏览器之后就可以顺利的打开了。若是你遇到了这个故障还没有解决,不妨试一试喔!

7.1K30

关于状态可见原则

外部站点 当前窗口 当前窗口打开当前站点的页面 当前窗口打开外部站点的页面 新窗口 新窗口打开当前站点的页面 新窗口打开外部站点的页面 就导致了用户操作之前,会不能确定目标内容会以何种方式呈现,也就是...当前常见的方案是链接文本的后面加上一个表示跳转到外部的图标,用于提醒用户链接目标是站外内容,如果点击将会离开本站点。这时用户可以主动选择是否使用新窗口打开。...默认当前窗口打开时,用户可以通过鼠标右键菜单决定链接打开方式,也可以通过浏览器的快捷键(如Chrome 键盘快捷键)进行控制;而如果默认为新窗口打开,则无法支持切换为在当前窗口打开链接。...同样试着解决下 打开方式\跳转目标 当前站点 外部站点 当前窗口 默认 新窗口 可以发现对于新窗口的场景,只使用同一个图标,理由是对于当前页面的影响不大,不管是不是站点的内容,用户都可以很方便的返回...不过,还是不推荐将链接设置为新窗口打开的方式,将选择权留给用户。对于不得不使用新窗口打开时,可以明确告知用户,减少不必要的尝试。

2.4K30

写了一个打开最大新窗口的JS

IE里面如果使用a标签的target=”_black”打开新窗口,那么窗口的大小是由最后一次关闭窗口时窗口大小决定的,如果我们希望a标签打开新窗口都是最大的窗口,那么我们需要使用window.open...另外在IE7里面还有另外一个问题就是如果我们是用a标签打开新窗口,那么window.close()的时候会弹出提示问是否关闭该窗口,而且这个问题不能使用window.opener=null来避免这个提示框...所以我们必须是使用window.open来打开新窗口,那么就可以使用window.close()而不会弹出关闭窗口的提示。...这个函数基于JQuery来写的,原理很简单,找到所有具有target为_black的a标签,将标签添加click函数。

3.3K30

Chrome 插件收藏

更酷的使用浏览器 Gestures for Google Chrome 鼠标手势。 Vimium 使用 Vim 的方式来浏览页面。 Link Preveiw 预览超链接指向的页面的内容。...Web 前端开发相关 Prism Pretty 语法高亮浏页面新窗口打开的CSS,JS。 JSONView 语法高亮浏页面新窗口打开的 JSON。...Visual Event 查看用 jQuery 绑定的事件处理代码。如果用浏览器自带的的 Event Listeners 查看的话,可以查看到元素上绑定的事件,但指向是的 jQuery 的源码。...LiveStyle CSS的文件绑定调整好后,改动CSS的文件或同步到浏览器,浏览上改动也会同步到文件。注意,要让这个插件生效。...2,服务器上打开 HTML 文件。 这个过程还是略显麻烦的。 Browsersync 是更好的替代解决方案。

1.4K10

点击菜单选项,右侧主体区新增子界面(Tab)的实现

有一种效果是这样的,当点击左边菜单的时候,右边的主体区会弹出相应的页面,点击多个菜单选项时,右边依次陈列这些窗口,这些窗口之间可以相互切换,类似于浏览器的多个打开的窗口那样。...,如上图所示的我的桌面 content: '新增界面里的内容' ,//这里可放一个iframe,一边把外部页面引入到这里, id:id //一个数字,是每个打开的界面的唯一标识符 })...上面的代码详细详细写了每个参数的意思和用途,参数一 是一个类似于 id 的标签上的属性值,layui这个属性为 lay-filter="参数一" ,执行上面的方法新增的窗口会被放置 一个属性...id,这里以时间戳模拟下 }) } 方法传入 title,url和id....a标签上,不要使用href来声明链接,否则会跳转出去其他页面,可以写为 _href ,js可根据属性获得其链接值。

3.3K20
领券