gpt4 book ai didi

javascript - 为多个div设置类

转载 作者:行者123 更新时间:2023-11-28 13:57:32 24 4
gpt4 key购买 nike

我正在对多个 div 使用鼠标悬停效果。鼠标悬停操作所有 div 的类,将其中一个设置为“class='active'”,以便可以看到它。现在我尝试“重置”特定事件的更改,例如“单击”。我的 mouseoverscript (使用 jQuery)如下

$(document).ready(function() {
switches = $('#switches > span');
slides = $('#slides > div');
switches.each(function(idx) {
$(this).data('slide', slides.eq(idx));
}).hover(
function() {
switches.removeClass('active');
slides.removeClass('active');
$(this).addClass('active');
$(this).data('slide').addClass('active');
});
});

现在我有多个鼠标悬停 div 导致以下 html 文件

<html>
<head>

<title>test</title>

<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="switch.js"></script>

<style type="text/css">

#switches .active {
font-weight: bold;
}

#slides div {
display: none;
}

#slides div.active {
display: block;
}

</style>

</head>
<body>


<div id="slides">
<div id="slide1" class="active">Well well.</div>
<div id="slide2">Oh no!</div>
<div id="slide3">You again?</div>
<div id="slide4">I'm gone!</div>
</div>

<div id="switches">
<span id="switch1" class="active">First slide</span>
<span id="switch2">Second slide</span>
<span id="switch3">Third slide</span>
<span id="switch4">Fourth slide</span>
</div>


<br><a href = "javascript:void(0)" onclick ="switches.removeClass('active');slides.removeClass('active');$(switch1).attr('class','active');$(slide1).attr('class','active')">Reset</a>

<div id="slides">
<div id="slide1" class="active">Well well.</div>
<div id="slide2">Oh no!</div>
<div id="slide3">You again?</div>
<div id="slide4">I'm gone!</div>
</div>

<div id="switches">
<span id="switch1" class="active">First slide</span>
<span id="switch2">Second slide</span>
<span id="switch3">Third slide</span>
<span id="switch4">Fourth slide</span>
</div>

对于第一个 div 组,重置效果很好,但第二个 div 组不受影响。我该如何解决这个问题?

最佳答案

ID 必须是唯一的。您应该将switchesslides更改为类而不是ID。

关于javascript - 为多个div设置类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7233017/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com