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