局部（或全局）设置<a>标签的target属性

最新推荐文章于 2023-11-16 14:56:37 发布

dgsdh1321

最新推荐文章于 2023-11-16 14:56:37 发布

阅读量330

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Jener/p/6052267.html

版权

对于超链接<a>标签，target属性的设置是比较关键的，在不同的用户场景下选用适合的新页面载入方式，可以大大的提高访客的体验感。我们一般对target的设置可以挨个来，但如果我们需要在局部或者全局对所有的<a>标签target属性进行设置，那要怎么做呢？

╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱ ╱╱ 分割线在此 ╲╲╲╲╲╲╲╲╲╲╲╲╲╲╲╲╲╲╲╲╲╲╲╲╲╲

★ 对整个页面内所有<a>统一设置设置

如果我们需要对整个页面内所有<a>标签的target属性都为‘_blank’，即点击超链接之后以弹出新页面的方式打开；那么我们只需要在<head></head>里面加入如下这句代码，就能够实现。

<basetarget="_blank">

需要注意的是，如果我们需要对某个特定的超链接以不同的方式打开，那么可以在该<a>标签内直接设置不同的target属性值就可以了。（因为内联设置的优先级高于外部的）

★

由于网页的布局一般是分成几个不同的内容块，在不同的内容块超链接<a>打开新页面的方式也有些不同。因此这就涉及到对局部内<a>标签的设置。

◇ 实现方法自定义JS函数

示例代码

<ahref="http://www.baidu.com">百度去</a>
<ahref="http://www.sogou.com">搜狗去</a>
<ahref="http://www.sina.com">新浪去</a>
<fieldsetid="portionA">
<legend>局部<a></legend>
<p>该容器内所有的target的属性值为"_self"</p>
<ahref="http://www.baidu.com">百度去</a>
<ahref="http://www.sogou.com">搜狗去</a>
<ahref="http://www.sina.com">新浪去</a>
</fieldset>
<script>
function portionA(){
var aN = document.getElementById("portionA").getElementsByTagName("a");
for(var i =0; i < aN.length; i++){
aN[i].target ="_self";/*遍历局部a标签并设置target属性值*/
}
}
portionA();//调用函数
</script>

◇ 实现方法利用jQuery

提示使用jQuery可获取当前容器下（无论有多少层容器嵌套）所有的a标签。

实现代码

<fieldsetid="portionA">
<legend>局部<a></legend>
<p>该容器内所有的target的属性值为"_self"</p>
<ahref="http://www.baidu.com">百度去</a>
<ahref="http://www.sogou.com">搜狗去</a>
<ahref="http://www.sina.com">新浪去</a>
</fieldset>
<scriptsrc="JS/jquery-3.1.1.min.js"></script>
<!--要引入jQuery先-->
<script>
$(document).ready(function(){
$("#portionA").find("a").attr("target","_self");
/*使用find方法找到<a>标签，然后使用attr方法设置属性*/
})
</script>

提示默认情况下，点击超链接是在当前页面打开新网页，即" target='_self ' " ;

转载于:https://www.cnblogs.com/Jener/p/6052267.html

dgsdh1321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
局部（或全局）设置<a>标签的target属性

对于超链接<a>标签，target属性的设置是比较关键的，在不同的用户场景下选用适合的新页面载入方式，可以大大的提高访客的体验感。我们一般对target的设置可以挨个来，但如果我们需要在局部或者全局对所有的<a>标签target属性进行设置，那要怎么做呢？ ╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱分割线在此╲╲╲╲...
复制链接

扫一扫