局部(或全局)设置<a>标签的target属性
对于超链接<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 ' " ;
从零到现在,一路走来,感谢众多无私的知识分享者,我愿意为你们接下一棒!