a标签的target属性

a标签的target属性前端a标签最重要的属性是href属性，实现页面的跳转。但是在当前页面显示还是在新页面中显示需要使用target属性控制前端a标签最重要的属性是href属性，实现页面的跳转。但是在当前页面显示还是在新页面中显示需要使用target属性控制target属性有五个特殊值。1.target="_self"内容在当前页面显示。2.target="_blank"内容在新页面...

前端小菜鸟WZK

23915人浏览 · 2019-10-31 17:00:16

前端小菜鸟WZK · 2019-10-31 17:00:16 发布

a标签的target属性

- - 前端a标签最重要的属性是href属性，实现页面的跳转。但是在当前页面显示还是在新页面中显示需要使用target属性控制

前端a标签最重要的属性是href属性，实现页面的跳转。但是在当前页面显示还是在新页面中显示需要使用target属性控制

target属性有五个特殊值。
1.target="_self"
内容在当前页面显示。
2.target="_blank"
内容在新页面显示。
3.target=“three”
内容在对应窗口显示
4.target="_top"
在当前窗体打开链接，并替换当前的整个窗体(框架页)，清除所有包含的框架
5.target="_parent"
在父窗体中打开链接，在窗口与顶级框架中，等同于_self
在实现过程中，跳转按钮1,2很容易实现，但是跳转3中，在主页面写了一个iframe框架，在点击按钮3时，页面内容显示在框架中。
在实现跳转4，与跳转5时，采用大框架套中框架，中框架套小框架，而按钮与内容显示在小框架中，如图：
程序首页
所有的框架均在首页显示。
下面是相应代码。test.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <link rel="stylesheet" href="test.css">
</head>

<body>
    <div id="main">
        <div id="first">
            <a href="first.html" target="_self">跳转1</a>
        </div>
        <div id="second">
            <a href="second.html" target="_blank">跳转2</a>
        </div>
        <div id="third">
            <a href="third.html" target="three">跳转3</a>
        </div>
        <div id="ad-iframe">
            <iframe name="three" width="100%" height="100%" src=" " frameborder="2" seamless></iframe>
            <iframe name="big" width="800px" height="300px"  src="fourth.html" frameborder="2" seamless>
            </iframe>
        </div>
    </div>
</body>

</html>

fourth.html为中框架

<body>
    <iframe src="fourth1.html"  width="700px" height="300px" frameborder="2" seamless>
    </iframe>
</body>

fourth1.html为小框架

<body>
    <iframe src="fourth2.html" width="300px" height="200px" frameborder="2" seamless>
    </iframe>
    <iframe src="five.html" width="300px" height="200px" frameborder="2" seamless>
    </iframe>
</body>

fourth2.html为框架中的内容，注意到href=""

<body>
    <div id="fourth">
        <a href="" target="_top">跳转4</a>
    </div>
    <div>跳转按钮4</div>
    <div> _top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)，清除所有包含的框架</div>
</body>

five.html

<body>
    <div id="five">
        <a href="" target="_parent">跳转5</a>
    </div>
    <div>跳转按钮5</div>
    <div> _parent -- 在父窗体中打开链接，在窗口与顶级框架中，等同于_self </div>
</body>

参考链接：
[1]: https://www.runoob.com/cssref/css3-pr-target.html

View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

Element UI组件介绍

简介element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。1、安装Element UI，通过vue脚手架创建项vue init webpack element(项目名)2、在vue脚手架项目中安装elementui# 1.下载elementui的依赖npm i element-ui -S# 2.指定当前项目中使用elementuiimport