这是第二简单的过渡效果，但我仍然找不到任何简单的解决方案。
想要：我有一个项目列表和一个相应的幻灯片(DIV)列表。加载后，应该选择第一个列表项(粗体)，并且应该可以看到第一张幻灯片。当用户将鼠标悬停在另一个列表项上时，应改为选择该列表项，并显示相应的幻灯片。
以下代码有效，但是效果很糟。如何以一种优雅的方式获得这种行为？ jQuery具有数十种动画效果和复杂的过渡效果，但是我没有想出这种效果的简洁方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <script type="text/javascript">
function switchTo(id) {
document.getElementById('slide1').style.display=(id==1)?'block':'none';
document.getElementById('slide2').style.display=(id==2)?'block':'none';
document.getElementById('slide3').style.display=(id==3)?'block':'none';
document.getElementById('slide4').style.display=(id==4)?'block':'none';
document.getElementById('switch1').style.fontWeight=(id==1)?'bold':'normal';
document.getElementById('switch2').style.fontWeight=(id==2)?'bold':'normal';
document.getElementById('switch3').style.fontWeight=(id==3)?'bold':'normal';
document.getElementById('switch4').style.fontWeight=(id==4)?'bold':'normal';
}
<ul id="switches">
<li id="switch1" onmouseover="switchTo(1);" style="font-weight:bold;">First slide
</li>
<li id="switch2" onmouseover="switchTo(2);">Second slide
</li>
<li id="switch3" onmouseover="switchTo(3);">Third slide
</li>
<li id="switch4" onmouseover="switchTo(4);">Fourth slide
</li>
</ul>
Well well.
Oh no!
You again?
I'm gone! |
我不会在JS关闭时显示所有幻灯片(这可能会破坏页面布局)，而是将其放置在开关LIs real A的内部，该链接指向服务器端代码，该代码返回预先设置了"活动"类的页面正确的开关/滑盖。
1
2
3
4
5
6
7
8
9
10
11
12
13
| $(document).ready(function() {
switches = $('#switches > li');
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');
});
}); |
1
2
3
4
5
6
7
8
9
| #switches .active {
font-weight: bold;
}
#slides div {
display: none;
}
#slides div.active {
display: block;
} |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <html>
<head>
test
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
<script type="text/javascript" src="switch.js">
</head>
<body>
<ul id="switches">
<li class="active">First slide
</li>
<li>
Second slide
</li>
<li>
Third slide
</li>
<li>
Fourth slide
</li>
</ul>
Well well.
Oh no!
You again?
I'm gone!
</body>
</html> |
这是我的轻标记jQuery版本：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <script type="text/javascript" src="jquery.js">
<script type="text/javascript">
function switchTo(i) {
$('#switches li').css('font-weight','normal').eq(i).css('font-weight','bold');
$('#slides div').css('display','none').eq(i).css('display','block');
}
$(document).ready(function(){
$('#switches li').mouseover(function(event){
switchTo($('#switches li').index(event.target));
});
switchTo(0);
});
<ul id="switches">
<li>
First slide
</li>
<li>
Second slide
</li>
<li>
Third slide
</li>
<li>
Fourth slide
</li>
</ul>
Well well.
Oh no!
You again?
I'm gone! |
如果用户关闭了javascript，使用很少的HTML标记并且javascript可读性强，这将显示所有幻灯片。 switchTo函数采用一个索引号，其中的
<MMKG1>
/ 对将被激活，将所有相关元素重置为其默认样式(列表项为非粗体，DIV为display:none)，并设置所需的list-item和div到bold和display。只要客户端启用了javascript，功能将与您的原始示例完全相同。
这是jQuery版本：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js">
<script type="text/javascript">
$(function () {
$("#switches li").mouseover(function () {
var $this = $(this);
$("#slides div").hide();
$("#slide" + $this.attr("id").replace(/switch/,"")).show();
$("#switches li").css("font-weight","normal");
$this.css("font-weight","bold");
});
});
<ul id="switches">
<li id="switch1" style="font-weight:bold;">First slide
</li>
<li id="switch2">Second slide
</li>
<li id="switch3">Third slide
</li>
<li id="switch4">Fourth slide
</li>
</ul>
Well well.
Oh no!
You again?
I'm gone! |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <html>
<head>
<script type="text/javascript" src="jquery.js">
<script type="text/javascript">
$(document).ready(
function(){
$( '#switches li' ).mouseover(
function(){
$("#slides div" ).hide();
$( '#switches li' ).css( 'font-weight', 'normal' );
$( this ).css( 'font-weight', 'bold' );
$( '#slide' + $( this ).attr( 'id' ).replace( 'switch', '' ) ).show();
}
);
}
);
</head>
<body>
<ul id="switches">
<li id="switch1" style="font-weight:bold;">First slide
</li>
<li id="switch2">Second slide
</li>
<li id="switch3">Third slide
</li>
<li id="switch4">Fourth slide
</li>
</ul>
Well well.
Oh no!
You again?
I'm gone!
</body>
</html> |
此代码唯一的错误(至少对我而言)是您没有使用循环来处理所有元素。除此之外，为什么不这样呢？
对于循环，我的意思是通过JQuery抓取容器元素并遍历所有子元素，基本上是单线的。
