我創建了一個“加載頁面”，它應該是用戶連接時看到的第一頁。這是一個帶有中央按鈕的簡單頁面，人們必須點擊它。一旦他們這樣做，他們就可以訪問網站的其余部分。包括加載頁面在內的所有頁面都在同一個檔案夾中。該站點的每個頁面都有自己的：“XXXXX.html”。
所以我創建了一個 loader.html 頁面，并實作了一個 javascript 函式，即在這里：
let introBox = document.getElementById('intro');
introBox.addEventListener('click', function(){
document.location.href = "main.html";
});@keyframes sectionAnimation{
0%{
transform:scale(1);
}
50%{
transform:scale(1.5);
}
100%{
transform: scale(1);
}
}
html {
border: 0;
margin: 0;
padding: 0;
width: 100%;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,*:before,*:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body {
background-color: #fff;
padding: 0;
margin: 0;
height: auto;
width: 100%;
background-repeat: no-repeat;
& img{
width: 50%;
}
}
.loaderbody{
background-image: url('../../Assets/R.png');
}
b {
position: relative;
display: block;
font-family: helvetica neue, helvetica, sans-serif;
line-height: 1.15em;
margin-top: -1.15em;
top: 2.3em;
font-size: 0.67em;
font-weight: 400;
letter-spacing: 0.025em;
opacity: 0.75;
text-align: center;
}
b span {
font-size: 0.785em;
font-weight: 400;
opacity: 0.4;
}
#intro {
width: 200px;
margin:auto;
margin-top:25%;
animation: sectionAnimation 1.5s both infinite;
transform:scale(1);
}
.button {
display: inline-block;
text-decoration: none;
position: relative;
margin-top: 40px;
}
.button .bottom {
position: absolute;
left: 7px;
top: 7px;
width: 100%;
height: 100%;
background-color: #2acdc1;
display: block;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.button .top {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 24px 34px 22px 34px;
border: 2px solid #04049d;
}
.button-dark .top {
border: 2px solid #fff;
}
.button .top .label {
font-family: sans-serif;
font-weight: 600;
color: #04049d;
font-size: 12px;
line-height: 110%;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
-webkit-transition: all .15s ease-out;
-moz-transition: all .15s ease-out;
-o-transition: all .15s ease-out;
transition: all .15s ease-out;
}
.button-dark .top .label {
color: #fff;
}
.button:hover .bottom {
left: 0;
top: 0;
background-color: #f3f3f3;
}
.button:hover .top .label {
color: #2acdc1;
}
.button-border {
position: absolute;
background-color: #2acdc1;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.button:hover .top .button-border-left,.button:hover .top .button-border-right {
height: calc(100% 2px);
}
.button:hover .top .button-border-top,.button:hover .top .button-border-bottom {
width: calc(100% 2px);
}
.button-border-left {
left: -2px;
bottom: -2px;
width: 2px;
height: 0;
}
.button-border-top {
left: -2px;
top: -2px;
width: 0;
height: 2px;
}
.button-border-right {
right: -2px;
top: -2px;
width: 2px;
height: 0;
}
.button-border-bottom {
right: -2px;
bottom: -2px;
width: 0;
height: 2px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../Css/main copie.css">
<title>TP</title>
</head>
<body class="loaderbody">
<script type="text/javascript" src="../Js/loader.js"></script>
<section id="intro">
<div id="intro-content" class="center-content">
<div class="center-content-inner">
<div class="content-section content-section-margin">
<div class="content-section-grid clearfix">
<a href="#" class="button nav-link">
<div class="bottom"></div>
<div class="top">
<div class="label">Let's go !</div>
<div class="button-border button-border-left"></div>
<div class="button-border button-border-top"></div>
<div class="button-border button-border-right"></div>
<div class="button-border button-border-bottom"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>元素“介紹”是我加載頁面上的按鈕。但是，當我單擊它時，我會停留在同一個 URL 上。我注意到，當我單擊該框時，它會在我的 URL 末尾自動添加一個“#”。所以我假設該功能有點作業，并且我的點擊被檢測到。
似乎問題與 .location.href 有關，但我無法理解。
非常感謝。
uj5u.com熱心網友回復：
缺少斜杠/，您的代碼應如下所示：
introBox.addEventListener('click', function(){
document.location.href = "/main.html";
});
如果你想在你的網站之外重定向，你必須添加雙斜杠//。
document.location.href = "//google.com";
編輯：實際錯誤在標簽上href="#"，將其更改為"/main.html". 如果你愿意，你可以洗掉監聽器，它不再需要了。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/475630.html
標籤：javascript 网络 地点 链接
上一篇：使用PHP提取嵌套標簽