a标签的target属性

mac2024-05-30  38

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

最新回复(0)