对于超链接<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 ' " ;