在当前页面打开外联页面的几种常见的方法(自我总结,欢迎大家指出不对的地方,会及时的更新)

第一种:使用a标签进行外联页面的打开:

 <a  target="_blank" :href="this.outlink"></a>

可以看到a标签中有targe属性,那么target属性作用有哪些呢?
a标签的四种target属性:

  • “_blank”:浏览器总在一个新打开、未命名的窗口中载入目标文档。
  • “_parent”:这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。
  • “_self”:这个目标的值对所有没有指定目标的 a标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。
  • “_top”:文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

第二种:使用window.localtion.href="/url",但是在使用的时候出现了一个问题,打开一个外部链接,返回到当前页面后,在此访问变成了404,需要刷新页面才可以。
第三种:使用window.open(使用了模板字符串,可以携带参数进行外部链接的跳转

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的示例代码,实现了网页顶部的导航栏、外联js的轮播和页面边缘的一键置顶按钮和咨询跳转按钮。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页示例</title> <style> /* 导航栏样式 */ nav { background-color: #333; color: #fff; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; } nav a { color: #fff; text-decoration: none; margin-left: 20px; } nav a:hover { color: #ccc; } /* 轮播样式 */ .carousel { width: 100%; height: 400px; overflow: hidden; position: relative; } .carousel ul { list-style: none; margin: 0; padding: 0; width: 300%; height: 400px; position: relative; left: 0; top: 0; animation: slide 10s linear infinite; } .carousel li { float: left; width: 33.33333%; height: 400px; position: relative; } .carousel li img { width: 100%; height: 100%; } @keyframes slide { 0% { left: 0 } 20% { left: 0 } 25% { left: -100% } 45% { left: -100% } 50% { left: -200% } 70% { left: -200% } 75% { left: -300% } 95% { left: -300% } 100% { left: -400% } } /* 按钮样式 */ .btn-group { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; } .btn { width: 50px; height: 50px; background-color: #333; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; cursor: pointer; } .btn:hover { background-color: #ccc; color: #333; } </style> </head> <body> <nav> <h1>网页标题</h1> <div> <a href="#">首页</a> <a href="#">产品</a> <a href="#">服务</a> <a href="#">关于我们</a> <a href="#">联系我们</a> </div> </nav> <div class="carousel"> <ul> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> </ul> </div> <div class="btn-group"> <div class="btn" onclick="window.scrollTo(0,0)"> <span>置顶</span> </div> <div class="btn"> <a href="http://www.example.com">咨询</a> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(function() { // 轮播初始化 var $carousel = $('.carousel'); var $ul = $carousel.find('ul'); var $li = $carousel.find('li'); var liWidth = $li.eq(0).width(); var liHeight = $li.eq(0).height(); $ul.width(liWidth * $li.length); $li.width(liWidth).height(liHeight); // 置顶按钮显示/隐藏 $(window).scroll(function() { if ($(this).scrollTop() > 100) { $('.btn-group').fadeIn(); } else { $('.btn-group').fadeOut(); } }); }); </script> </body> </html> ``` 需要注意的是,上述代码中的轮播效果使用了 jQuery 库,需要在页面中引入 jQuery 库的 js 文件。在实际使用中,也可以使用其他的 js 库或自己编写 js 实现轮播效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值