每当一个html元素将类“活动”更改或添加类到另一个

• Z时代
• 2024-01-10
• 分类：问答

我有一个滑块与自动播放。 每5秒一次，不同类别的幻灯片放映中的不同元素将该类别视为“活动”，您可以看到不同的幻灯片。和往常一样。每当一个html元素将类“活动”更改或添加类到另一个

<style> 
.topHeaderOfSite.slide1{background-color:red;} 
.topHeaderOfSite.slide2{background-color:green;} 
.topHeaderOfSite.slide3{background-color:yellow;} 
</style> 
<div class="topHeaderOfSite"> 
    //some code here... 
</div> 
<div class="slides"> 
    <div class="slide1 active"> 
     //img ... 
    </div> 
    <div class="slide2"> 
     //img ... 
    </div> 
    <div class="slide3"> 
     //img ... 
    </div> 
</div> 

我想，每一个比“活动”类更改幻灯片如时间：“滑件积极的”，“滑件3活跃”，带class =“topHeaderOfSite”元素添加类滑动元件。

<div class="topHeaderOfSite slide1"> 
    //some code here... 
</div> 

我想要这个改变“topHeaderOfSite”背景颜色，不同的幻灯片，不同的颜色。

我试试这个由我的自我，但其只对第一张幻灯片的工作，如果我改变幻灯片和主动去“.slide2' 中，” .topHeaderOfSite“仍然继续有类” .topHeaderOfSite.slide1'

jQuery(document).ready(addClassToTop); 
function addClassToTop() { 
    if($('.slide1').hasClass("active")){ 
     $('.topHeaderOfSite').addClass("slide1"); 
    }else if($('.slide2').hasClass("active")){ 
     $('.topHeaderOfSite').addClass("slide2"); 
    }else if($('.slide3').hasClass("active")){ 
     $('.topHeaderOfSite').addClass("slide3"); 
    }else{$('.topHeaderOfSite').addClass("nothingHappen"); 
} 

您可以查看网站上的住址http://www.zaxaropolis.gr/nextgen/index.php 这些课程是障碍，但您可以理解。

回答：

.topHeaderOfSite {  
    height: 50px;  
    width: 100%;  
    animation: tops 15s infinite;  
}  
@keyframes tops {  
    0%, 100%  
{  
    background: #FF0000  
    }  
    33.33% {  
    background: #333  
    }  
    66.66% {  
    background: #666  
    }  
}  
.slides {  
    position: relative;  
}  
.slides div {  
    position: absolute;  
    opacity: 0;  
    animation: FadeIn 15s infinite;  
}  
@keyframes FadeIn {  
    0% { opacity:0; transform:opacity(0);}  
    30% {opacity:1; transform:opacity(1);}  
    33.33% { transform:opacity(0); }  
}  
.slides div:nth-child(1){ animation-delay: 0s }  
.slides div:nth-child(2){ animation-delay: 5s }  
.slides div:nth-child(3){ animation-delay: 10s }

<div class="topHeaderOfSite"></div>  
<div class="slides">  
    <div>  
    <img src="http://placehold.it/200/333333">  
    </div>  
    <div>  
    <img src="http://placehold.it/200/666666">  
    </div>  
    <div>  
    <img src="http://placehold.it/200/FF0000">  
    </div>  
</div>

回答：

以上是 每当一个html元素将类“活动”更改或添加类到另一个 的全部内容， 来源链接： utcz.com/qa/264015.html