頁面加載上的活動類未觸發
[英]Active class on page load not triggering
問題描述
因此，如果背景圖像位於當前點上，我在網站上有一個帶有導航點的圖像滑塊，這些導航點具有活動動畫。 我已將其設置為當頁面加載時，第一個點將從一開始就具有活動類。 一切正常，但我只是不明白為什么頁面加載上的活動點不會觸發，除非我在 body 元素上包含onload = buttonClick() ，我嘗試在 JS 中使用事件偵聽器，但它不起作用。 這對我來說沒有意義，因為我的頭類有一個主動偵聽器，它調用我的 onStart 函數，反過來，它應該調用我的buttonClick函數並激活活動類。 有人可以幫助闡明這個問題嗎？ 這對我來說沒有意義。 謝謝^_^
HTML :
<!DOCTYPE html>
<html lang="en">
<head id = "start">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ukiyo Sushi ツ</title>
<link href = "style.css" type = "text/css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
<script src = "/script.js"></script>
</head>
<body> <!--<body onload = "buttonClick()">-->
<header id = "bg">
<nav class = "navbar">
<a href = "#" class = "logo">Ukiyo Sushi ツ</a>
<ul>
<li><a href ="#" class = "about">About us</a></li>
<li><a href = "#" class = "menu">Menu</a></li>
<li><a href = "#" class = "services">Services</a></li>
<li><a href = "#" class = "contact">Contact</a></li>
</ul>
</nav>
<div class = "sushiPlatter">
<h2 id = "caption">Chef's Special Sushi Platter</h2>
<div class = "dots">
<span class = "dot" onclick = "imgslider(1); currentSlide(1);"></span>
<span class = "dot" onclick = "imgslider(2); currentSlide(2);"></span> <span class = "dot" onclick = "imgslider(3); currentSlide(3);"></span>
</div>
<a href = "#">View Menu</a>
</div>
</header>
<section class = "description">
<div class = "topRow">
<dl class = "adress">420 High Street, Houston, Texas 77075</dl>
<dl class = "phoneNumber">(832)-123-4567</dl>
<dt>Lunch: </dt>
<dl class = "hours">12:00pm - 4:00pm</dl>
<dt>Dinner: </dt>
<dl class = "hours">6:00pm - 10:30pm</dl>
</div>
<div class = "imageDiv">
<span>Welcome to Ukiyo Sushi ^_^</span>
<figure>
<img src = "img/lantern.jpg" class = "descImg">
<figcaption class = "imgCap">Ukiyo Sushi is a japanese sushi restaurant that was established in Houston, Texas in 2010. Due to our excellent customer service and quality of food, we have built a reputation as one of the best sushi restauraunts in the greater Houston area. </figcaption class = "imgCap">
</figure>
</div>
</section>
</body>
</html>
JavaScript :
var imageIndex = 1;
document.getElementById("start").addEventListener("load", onStart);
function onStart(){
buttonClick(imageIndex);
}
function currentSlide(n)
{
buttonClick(imageIndex = n);
}
function buttonClick(n){
var i;
var dot = document.getElementsByClassName("dot");
if(n > dot.length){ imageIndex = 1}
if(n < 1){imageIndex = dot.length}
for(i = 0; i < dot.length; i++){
dot[i].classList.remove("active");
}
dot[imageIndex -1].className += " active";
}
編輯：好吧，所以我發現你不能將 head 元素用於事件，這解決了我的第一個問題，但現在我無法使用事件偵聽器觸發 onload 事件我必須在我的HTML中使用 onload 事件有人知道為什么嗎？
HTML :
<body> <!--<body onload = "onStart()">-->
<header id = "bg">
<nav class = "navbar">
<a href = "#" class = "logo">Ukiyo Sushi ツ</a>
<ul>
<li><a href ="#" class = "about">About us</a></li>
<li><a href = "#" class = "menu">Menu</a></li>
<li><a href = "#" class = "services">Services</a></li>
<li><a href = "#" class = "contact">Contact</a></li>
</ul>
</nav>
<div class = "sushiPlatter">
<h2 id = "caption">Chef's Special Sushi Platter</h2>
<div class = "dots">
<span class = "dot" onclick = "imgslider(1); currentSlide(1);"></span>
<span class = "dot" onclick = "imgslider(2); currentSlide(2);"></span> <span class = "dot" onclick = "imgslider(3); currentSlide(3);"></span>
</div>
<a href = "#">View Menu</a>
</div>
</header>
<section class = "description">
<div class = "topRow">
<dl class = "adress">420 High Street, Houston, Texas 77075</dl>
<dl class = "phoneNumber">(832)-123-4567</dl>
<dt>Lunch: </dt>
<dl class = "hours">12:00pm - 4:00pm</dl>
<dt>Dinner: </dt>
<dl class = "hours">6:00pm - 10:30pm</dl>
</div>
<div class = "imageDiv">
<span>Welcome to Ukiyo Sushi ^_^</span>
<figure>
<img src = "img/lantern.jpg" class = "descImg">
<figcaption class = "imgCap">Ukiyo Sushi is a japanese sushi restaurant that was established in Houston, Texas in 2010. Due to our excellent customer service and quality of food, we have built a reputation as one of the best sushi restauraunts in the greater Houston area. </figcaption class = "imgCap">
</figure>
</div>
</section>
</body>
var imageIndex = 1;
document.body.addEventListener("load", onStart);
function onStart(){
buttonClick(imageIndex);
}
function currentSlide(n)
{
buttonClick(imageIndex = n);
}
function buttonClick(n){
var i;
var dot = document.getElementsByClassName("dot");
if(n > dot.length){ imageIndex = 1}
if(n < 1){imageIndex = dot.length}
for(i = 0; i < dot.length; i++){ /*removes the active class for the whole dot class*/
dot[i].classList.remove("active");
}
dot[imageIndex -1].className += " active";
}
JavaScript :
var imageIndex = 1;
document.body.addEventListener("load", onStart);
function onStart(){
buttonClick(imageIndex);
}
function currentSlide(n)
{
buttonClick(imageIndex = n);
}
function buttonClick(n){
var i;
var dot = document.getElementsByClassName("dot");
if(n > dot.length){ imageIndex = 1}
if(n < 1){imageIndex = dot.length}
for(i = 0; i < dot.length; i++){ /*removes the active class for the whole dot class*/
dot[i].classList.remove("active");
}
dot[imageIndex -1].className += " active";
}
1 個解決方案
解決方案1
0 2020-01-01 13:25:11
環顧四周，對其進行了測試，它可以正常工作，而不是在主體上使用事件偵聽器，而是將一個事件偵聽器放在窗口本身上，並且可以正常工作。 感謝您為我指明正確的方向。
解決方案：
var imageIndex = 1;
window.addEventListener("load", onStart);
function onStart(){
buttonClick(imageIndex);
}
function currentSlide(n)
{
buttonClick(imageIndex = n);
}
function buttonClick(n){
var i;
var dot = document.getElementsByClassName("dot");
if(n > dot.length){ imageIndex = 1}
if(n < 1){imageIndex = dot.length}
for(i = 0; i < dot.length; i++){ /*removes the active class for the whole dot class*/
dot[i].classList.remove("active");
}
dot[imageIndex -1].className += " active";
}
如何在頁面加載時刪除活動類？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.