胖蔡说技术
随便扯扯

简单说一说a标签的几种跳转方式

a标签在网页中是被用来链接其他页面而使用的,今天我们我简单了解下a标签的几种跳转方式。以便于我们更加深入的了解a标签。

使用

如下提供一个简单的a标签的使用方法

<a href="https://www.enjoytoday.cn" target="_blank">胖蔡叨叨叨</a>

如上,href属性就是我们控制a标签需要跳转到的目标地址,而target就是我们控制跳转方式的属性。

跳转方式

属性值

target属性值支持的值集如下:

  • _blank:这个就是上面设置的属性值,也是我们比较常用到的,表示跳转到一个新页面打开,会打开一个新的页面窗口
  • _self:这个属性值是指直接在当前页面打开a标签的链接,这也是a标签的默认设置
  • _parent:这个就需要结合框架类型frame一起使用,设置这个属性表示当前frame引用的html代码中的a标签将在它的父框架中打开(替换)。
  • _top:同_parent类似,这个属性值会控制页面在当前框架的最顶部显示。

案例

创建文件

1、常见一个nav.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    body {
      width: 100%;
      height: 300px;
      margin: 0;
      background-color: #bbef88;
    }
  </style>
</head>

<body>

  我是nav.html
</body>
</html>

2、创建一个center.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    body {
      margin: 0;
      width: 100%;
      height: 500px;
      background-color: #2196F3;
    }
   .btn {
      display:inline-block;
      padding:8px 15px;
      background:green;
      color:white;
      margin: 30px 100px;
  }
  </style>
</head>

<body>
  我是center.html
  <a class="btn" href="https://www.enjoytoday.cn/" target="_self" style="color: #fff;text-decoration: none;">跳转到胖蔡叨叨叨</a>
</body>
</hml>

3、创建一个header.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    body {
      width: 100%;
      height: 300px;
      margin: 0;
      background-color: #FF952C;
    }
  </style>
</head>

<body>
  我是header.html
</body>
</html>

4、创建一个content.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <style>
    body {
      height: 600px;
      background-color: #FFCC00;
      display: flex;
      margin: 0;
    }

    iframe {
      height: 500px;
    }
  </style>
</head>

<body>
  <iframe src="nav.html" frameborder="0" style="width: 200px;"></iframe>
  <iframe src="center.html" frameborder="0" style="width: 1300px"></iframe>
</body>
</html>

5、创建一个index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
   <title>a标签的4中打开跳转方式</title>
  <style>
    body {
      width: 1500px;
      margin: 10px auto;
      display: flex;
      flex-direction: column;
    }

    iframe {
      width: 100%;
    }
  </style>
</head>

<body>
  <iframe src="header.html" frameborder="0" height="300px"></iframe>
  <iframe src="content.html" frameborder="0" height="600px"></iframe>
</body>
</html>

修改属性值

通过上述的代码我们可以通过改变center.htmla标签的target值看了解下不同跳转方式的区别:

  • target_self

直接在center.html中打开替换

  • target_blank

打开一个新的tab页去显示

  • target_parent

会在center.html上层content.html打开替换

  • target_top

会在最顶层main.html中打开并替换。

获取代码

如果觉得对你有用的话,记得扫码关注下微信公众号,会有更多有趣的知识分享给大家。

代码点击获取GitHub示例代码

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » 简单说一说a标签的几种跳转方式
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏