CSS 类没有改变
[英]CSS class isn't changing
问题描述
I am trying to make a function to change the active class of buttons for an image slider to the hover class.
我正在尝试创建一个函数来将图像滑块的活动按钮类更改为悬停类。 I am stuck on the first call to change the active class to the first image that it starts on as it seems like the function is just being ignored or maybe I am skipping over something small.我被困在第一次调用时将活动类更改为它开始的第一个图像，因为该函数似乎只是被忽略了，或者我可能跳过了一些小东西。
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>3 个解决方案
解决方案1
1 2019-12-15 15:15:26
Try to call the function on some event, for example when the page is loaded, by changing the body element.尝试在某些事件上调用该函数，例如在加载页面时，通过更改 body 元素。
<body onload="buttonClick()">
https://www.w3schools.com/jsref/event_onload.asp describes the event for more information. https://www.w3schools.com/jsref/event_onload.asp描述了该事件以获取更多信息。
As mentioned in the comment正如评论中提到的
function buttonClick(){
document.getElementsByClassName("dots")[0].className += " active";
}
解决方案2
0 2019-12-15 16:07:33
I think the problem is solved once you add a space, just like @evolutionxbox suggests.我认为添加空格后问题就解决了，就像@evolutionxbox 建议的那样。
(for demonstration purposes I added a call to your function in the code example and some content to the spans) （出于演示目的，我在代码示例中添加了对您的函数的调用以及跨度的一些内容）
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>解决方案3
0 2019-12-15 18:55:42
A couple things here.这里有几件事。 You need to make your dot elements display: inline-block to scale, and you need to pass a value greater than 1. Secondly, you need to select .dot and not .dots in your getElementsByClassName() function, and you need to add " active" not "active" as the latter creates class="dotactive"你需要让你的点元素display: inline-block to scale，你需要传递一个大于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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.