点击时如何在当前链接之上显示叠加内部链接？

Question

我想制作一个 onclick 按钮，该按钮会在另一个页面链接中滑动并更改覆盖网站 80% 的 URL，而上一页则保留在后台。关闭后，URL 返回上一个。

我想了一些方法来实现这一点，但是没有一个改变页面的URL，例如

• 嵌入 iframe 元素
• 覆盖 div 元素
• 制作弹出窗口

像这个网站一样，点击时页面会滑入并更改 URL
https://area17.com/work

Answer 1

您可以通过上面指定的任何方法来实现此目的，只需添加以下 Javascript 代码即可更改 URL，而无需重新加载页面。

window.history.pushState(state, pageTitle, theUrl);

https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Answer 2

如果您正在寻找这个，请联系我

.portfolio-overlay {
  width:100%;
  height:100%;
  opacity: 0.75;
  position:absolute;
  background-color:black;
  top:-100%;
  transition: top 0.3s ease-in-out;
  display:block;
    
}
.portfolio-overlay a.demoLink{
    width:100%;
    height:100%;
    position:absolute
}
.portfolio-overlay div {
    position:relative;
  display:inline-block;;
    
}

ul.portfolio-project-image { 
    list-style: none; 
    width:100% 

}

ul.portfolio-project-image li {
    position: relative;
    display: inline-block;
    width:100%;
  height: 100%;
  overflow: hidden;
}

li:hover .portfolio-overlay {
  top: 0;
  display:block;

    
}
.bt4 {
    text-align: center;
    margin-top: 160px;
    font: 200 12px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color:#FFF;
    width:100%;
    height:10px;
    margin-left:auto;
    margin-right:auto;
}
.bt5 {
    text-align: center;
    font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
    font-size: 16px;
    font-weight: 200;
    color:#FFF;
    width:100%;
    height:10px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 10px;
}

.portfolio-project {
    width: 32%;
    height: 373px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    margin-left:15px;
    float:left;
}


.portfolio-project-image{
    width: 100%;
    height: 373px;
}

.portfolio-project-image-one{
    width: 100%;
    height: 373px;
    background-image:url(../images/flyer_mock_up.jpg);
    background-position:center;
}



.portfolio-project-image-one:hover{
    width: 100%;
    height: 373px;
    background-image:url(../images/flyer_mock_up.jpg);
    background-position:center;
    display:block;
}

.bt5 a {
    text-align: center;
    font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
    font-size: 16px;
    font-weight: 200;
    color:#FFF;
    width:100%;
    height:10px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 10px;
    text-decoration:none;
}

<div class="portfolio-project-container">
<div class="portfolio-project">
<div class="portfolio-project-image">
<ul class="portfolio-project-image">
    <li>
    <p>
    Other page details
    </p>
        <div class="portfolio-project-image-one"></div>
        <div class="portfolio-overlay"><a class="demoLink" href="#"></a><div class="bt4">facebook</div><div class="bt5"><a href="https://www.facebook.com" class="html5lightbox" data-width="853" data-height="480" title=""> visit facebook</a></div><div class="bt6"></div></div>
    </li>
</ul>
</div>
</div>
</div>

Answer 3

是的，它有效。我认为这就是我正在寻找的，但是，它会创建一个虚假的 URL 入口点，如果您直接复制并粘贴地址，则无法链接回该入口点。