Question

我正在尝试使函数将图像滑块的活动按钮类更改为悬停类。我被困在将活动类更改为它开始的第一个图像的第一个调用上，因为好像该函数只是被忽略，或者我跳过了一些小东西。

function buttonClick(){
   document.getElementsByClassName("dots")[0].className += "active";
}

.active{
transform: scale(1);
opacity: .25;
}

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <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>
        <!--<div class = "hero active">
        <div class = "hero1">    
        <div class = "hero2">-->    
            <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)"></span>
                        <span class = "dot" onclick = "imgslider(2)"></span>
                        <span class = "dot" onclick = "imgslider(3)"></span>
                    </div>
                    <a href = "#">View Menu</a>
                </div>
            </header>
        <!--</div>
        </div>
        </div>-->
        <section class = "idkYet">
            <div>
                <span>hello I am filler content</span>
            </div>    
        </section>
    </body>
    </html>

Answer 1

尝试通过更改body元素在某些事件（例如，加载页面）时调用该函数。

<body onload="buttonClick()">

https://www.w3schools.com/jsref/event_onload.asp描述了该事件以获取更多信息。

如评论中所述

function buttonClick(){
   document.getElementsByClassName("dots")[0].className += " active";
}

Answer 2

我认为一旦添加空格就可以解决问题，就像@evolutionxbox建议的那样。

（出于演示目的，我在代码示例中向您的函数添加了调用，并在跨度中添加了一些内容）

function buttonClick(){
   document.getElementsByClassName("dots")[0].className +=" active";
   
}

buttonClick();

.active{
transform: scale(1);
opacity: 0.25;

}

   <!--<div class = "hero active">
    <div class = "hero1">    
    <div class = "hero2">-->    
        <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)">one</span>
                    <span class = "dot" onclick = "imgslider(2)">two</span>
                    <span class = "dot" onclick = "imgslider(3)">three</span>
                </div>
                <a href = "#">View Menu</a>
            </div>
        </header>
    <!--</div>
    </div>
    </div>-->
    <section class = "idkYet">
        <div>
            <span>hello I am filler content</span>
        </div>    
    </section>

Answer 3

这里有几件事。您需要使点元素display: inline-block缩放，并且需要传递大于1的值。其次，您需要在{{1}中选择.dot而不是.dots }函数，您需要添加getElementsByClassName()而不是" active"，因为后者会创建"active"

class="dotactive"

function buttonClick() {
  document.getElementsByClassName("dot")[0].className += " active";
}

.active {
  transform: scale(2);
  opacity: .25;
}

.dot{
   width:40px;
   height:40px;
   display:inline-block;
   background-color: lightblue;
   margin-right:4px;
}

CSS类没有改变

3 个答案: