0
複数のdivにマウスオーバーエフェクトを使用しています。マウスオーバーはすべてのdivのクラスを操作し、 "class = 'active'"として設定します。今私は特定のイベントの変更を「リセット」します。たとえば、「クリック」します。 複数のdivのクラスを設定する
$(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');
});
});
を次のように私のmouseoverscriptは（jQueryのを使用して）であるそして今、私はリセットがうまく機能し、複数のマウスオーバーのdivの結果の最初の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>
以下でを持っていますしかし、2つ目は何の影響も受けません。この問題を回避するにはどうすればよいですか？
@kingjivが正しい - あなたは同じ文書内の "id"値を再利用することはできません。 "id"を持つ各要素は、**ユニークな** "id"を持っていなければなりません。 – Pointy
http://jsfiddle.net/r4epD/が正しく動作しているように見えますが、 'same id'（' switch1'など）を複数回使用することはできません。 –