Question

CSS 类没有改变

2019-12-15

158

javascript

我正在尝试编写一个函数，将图像滑块按钮的活动类更改为悬停类。我被困在第一次调用以将活动类更改为它启动的第一个图像，因为似乎该函数被忽略了，或者我可能跳过了一些小问题。

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 的值。其次，您需要在 getElementsByClassName() 函数中选择 .dot 而不是 .dots ，并且您需要添加 " 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;
}

<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)">DOT 1</span>
      <span class="dot" onclick="imgslider(2)">DOT 2</span>
      <span class="dot" onclick="imgslider(3)">DOT 3</span>
    </div>
    <a href="#">View Menu</a>
  </div>
</header>

<section class="idkYet">
  <div>
    <span>hello I am filler content</span>
  </div>
</section>

<button onclick="buttonClick()">Click Me</button>

CSS 类没有改​​变

CSS 类没有改变