zoukankan      html  css  js  c++  java
  • 局部(或全局)设置<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 ' " ;
  • 相关阅读:
    【bzoj4917】Hash Killer IV 乱搞
    【bzoj2770】YY的Treap 权值线段树
    【bzoj4898】[Apio2017]商旅 Floyd+分数规划+Spfa
    【GXZ的原创】平衡树性能测试
    【bzoj2969】矩形粉刷 期望
    【bzoj3325】[Scoi2013]密码 逆模拟Manacher
    【bzoj4974】字符串大师 逆模拟KMP
    【bzoj4987】Tree 树形背包dp
    【bzoj3672】[Noi2014]购票 斜率优化dp+CDQ分治+树的点分治
    【bzoj4325】NOIP2015 斗地主(&“加强”版) 搜索
  • 原文地址:https://www.cnblogs.com/Jener/p/6052267.html
Copyright © 2011-2022 走看看