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 ' " ;
  • 相关阅读:
    mysqldump 导出数据库为DBname的表名为Tname的表结构 导出数据库的所有表的表结构
    mysqldump 备份某张表 Warning: A partial dump from a server that has GTIDs will by default include the GTIDs of all transactions,
    nfs missing codepage or helper program, or other error
    date 增加一个小时 减少一个小时
    mysqldump 备份单个数据库
    mysql删除账户
    怎么删除某个用户的所有帖子?
    mongodb删除重复数据
    ReSharper2018破解详细方法
    激活windows和office
  • 原文地址:https://www.cnblogs.com/Jener/p/6052267.html
Copyright © 2011-2022 走看看