如何通过简单的代码设置,让你网页中的超链接都是用新页面标签来打开,而不用一个一个链接去修改?
厦门网站建设在这里给你教一下非常简单的操作方法:
如果要在新选项卡中打开文档中的所有链接,则可以使用<base>
element:
HTML代码
<!– This link will open in a new tab. –>
<div class="wrapper">This link will be opened in a new tab:
<a href="https://freecodetools.org/">
Free Code Tools
</a>Read more:
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base">
MDN Documentation
</a></div>
CSS代码
/* Please ❤ this if you like it! */
.wrapper {
text-align: center;
padding: 0 15px;
background-color: #173446;
color: white;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
align-items: center;
font-size: 1.4em;
}
a {
color: #999;
position: relative;
}
a:after {
background-color: #999;
bottom: 0;
content: "";
height: 1px;
left: 0;
position: absolute;
transform: scaleX(0);
transition: all .3s ease-in-out 0s;
visibility: hidden;
width: 100%;
}
a:hover:after {
transform: scaleX(1);
visibility: visible;
}