设置多个div的类

时间:2011-08-29 16:34:17

标签: javascript jquery mouseover

我正在为多个div使用鼠标悬停效果。 mouseover操纵所有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保持不受影响。我该如何解决这个问题?

2 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:1)

我认为这个问题与具有相同ID的div有关。尝试命名第二组,如slides_2和switch_2,并对部分ID $(id ^ =“slides”)进行选择。