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

局部（或全局）设置<a>标签的target属性的更多相关文章

  1. <a>标签的target 属性 全局作用

    局部(或全局)设置<a>标签的target属性           对于超链接<a>标签,target属性的设置是比较关键的,在不同的用户场景下选用适合的新页面载入方式,可以大 ...

  2. HTML <a> 标签的 target 属性

    HTML <a> 标签的 target 属性 HTML <a> 标签 定义和用法 <a> 标签的 target 属性规定在何处打开链接文档. 如果在一个 <a ...

  3. html——a标签中target属性

    有 4 个保留的目标名称用作特殊的文档重定向操作: _blank 浏览器总在一个新打开.未命名的窗口中载入目标文档. _self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标, ...

  4. 512，a标签的target属性

    <a> 标签的 target 属性规定在何处打开链接文档. 1.“_blank”的意思: 浏览器总在一个新打开.未命名的窗口中载入目标文档. 2.“_parent”的意思: 这个目标,使得 ...

  5. a标签的target属性

    _blank 浏览器总在一个新打开.未命名的窗口中载入目标文档. _self 这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源 ...

  6. html中的a标签的target属性的四个值的区别？

    target属性规定了在何处打开超链接的文档. 如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的.名称与这个目标吻合的框架或者 ...

  7. 话说Form标签的target属性-----无刷新表单提交

    国庆前(2013)无聊,就在铁道部的12306上“逛”了下下. PS:原来之所以叫12306,是因为其客服号码是12306,好吧,我很无知…… 首先是被“逛”的页面:票价查询. 之所以去逛,是因为一直 ...

  8. 关于a标签的target属性

    超级链接a的target属性已经是不被新规范支持了,其值有四个保留字: 1._blank      <a href="document.html" target=" ...

  9. HTML <base> 标签的 target 属性 —— <base target="_blank" />

    为页面上所有链接规定默认目标: <head> <base target="_blank" /> </head> <body> < ...

随机推荐

  1. JavaScript字符转Unicode,顺便说句：GitHub的Oh no页面很亮

    遇到个输不出来的字符怎么办,因为输不出来的字符一般又是不常见大多数时候连名字也喊不出来的,所以想问百度谷歌大大也不大可能.如果是小白用户肯定会去把输入法软盘打开切换到其他键盘一个一个找.即使有搜狗输入 ...

  2. [Java集合] 彻底搞懂HashMap,HashTable,ConcurrentHashMap之关联.

    注: 今天看到的一篇讲hashMap,hashTable,concurrentHashMap很透彻的一篇文章, 感谢原作者的分享. 原文地址: http://blog.csdn.net/zhanger ...

  3. C#学习系列-类与结构的区别

    参考:http://www.microsoftvirtualacademy.com/Content/ViewContent.aspx?et=9851&m=9830&ct=31038 如 ...

  4. Vagrant使用简介

    一.简介: Vagrant是一款用于构建及配置虚拟开发环境的软件,基于Ruby,主要以命令行的方式运行.主要使用Oracle的开源VirtualBox虚拟化系统,与Chef,Salt,Puppet等环 ...

  5. 为什么项目的jar包会和tomcat的jar包冲突？

    为什么项目的jar包会和tomcat的jar包冲突? 碰到这个问题,猜测tomcat启动时会将自己的lib和项目的lib在逻辑上归并为一个大的lib,但是并没有做版本区分以及去重,这样相同的包可能就有 ...

  6. Liferay7 BPM门户开发之37: Liferay7下的OSGi Hook集成开发

    hook开发是Liferay客制扩展的一种方式,比插件灵活,即可以扩展liferay门户,也能对原有特性进行更改,Liferay有许多内置的服务,比如用hook甚至可以覆盖Liferay服务. 可作为 ...

  7. KnockoutJS 3.X API 第四章 数据绑定(1) 文本及样式绑定

    目录 本节将介绍六种文本绑定方式: visible绑定 text绑定 html绑定 css绑定 style绑定 attr绑定 可见文本绑定(visible) 使用visible绑定,来控制DOM元素的 ...

  8. 类的继承和多态性-编写Java应用程序，定义Animal类，此类中有动物的属性：名称 name,腿的数量legs，统计动物的数量 count;方法：设置动物腿数量的方法 void setLegs(),获得腿数量的方法 getLegs(),设置动物名称的方法 setKind(),获得动物名称的方法 getKind(),获得动物数量的方法 getCount()。定义Fish类，是Animal类的子类，

    编写Java应用程序,定义Animal类,此类中有动物的属性:名称 name,腿的数量legs,统计动物的数量 count;方法:设置动物腿数量的方法 void setLegs(),获得腿数量的方法 ...

  9. java基础—继承题目：编写一个Animal类，具有属性：种类；具有功能：吃、睡。定义其子类Fish

    编写一个Animal类,具有属性:种类:具有功能:吃.睡.定义其子类Fish package zhongqiuzuoye; public class Animal { //属性 private Str ...

  10. hibernate（九）多对多关联

    原文链接:http://www.orlion.ml/29/ 一.多对多单向关联 假设一个老师教多个学生,一个学生被多个老师教,这就是典型的多对多关系 配置方式是在Teacher类的getStudent ...