-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnav.html
81 lines (81 loc) · 3.92 KB
/
nav.html
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nav</title>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
var currIndex;
$("#box li:first").addClass("first");
$("#box li:last").addClass("last");
$("#box li").each(function(index,element){
$(element).hover(function(){
$(this).addClass("news").children("span").addClass("yinshen").end().siblings().removeClass("news");
$(this).prev().children("span").addClass("yinshen");
$("#container div").eq(index).show().siblings().hide();
currIndex=index;
},function(){
$(this).removeClass("news");
$(this).children("span").removeClass("yinshen").end().prev().children("span").removeClass("yinshen");
});
});
$("#box").on("mouseout",function(){
$("#box li").eq(currIndex).addClass("news").children("span").addClass("yinshen").end().siblings().removeClass("news");
$("#box li").eq(currIndex).prev().children("span").addClass("yinshen");
$("#container div").eq(currIndex).show().siblings().hide();
$("#box li").eq(currIndex).removeClass("news");
$("#box li").eq(currIndex).children("span").removeClass("yinshen").end().prev().children("span").removeClass("yinshen");
})
});
</script>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font-family: "Microsoft Yahei";font-size: 12px;}
ul,li{list-style: none;border-top: 1px solid #ccc;}
a{text-decoration: none;}
#box{height: 30px; position: absolute;right: 0;top: 0;background: #fff;}
li{float: left;position: relative;}
#container{width: 686px;height: 200px;position: absolute;top: 30px;right: 0;color: #fff;}
.one{background: rgba(0,0,0,.8);height: 200px;}
.two{background: rgba(1,200,3,.5);height: 200px;}
.three{background: blue;height: 200px;}
.four{background: pink;height: 200px;}
.five{background: tan;height: 200px;}
.six{background: green;height: 200px;}
.seven{background: skyblue;height: 200px;}
.eight{background: purple;height: 200px;}
.nine{background: lightgreen;height: 200px;}
li span{width: 1px;height: 14px;background: #ccc;position: absolute;top: 8px;right: 0;}
li a{padding: 0 20px;display: inline-block;height: 30px;line-height: 30px;color: coral;}
.yinshen{display: none;}
.first{border-left: 1px solid #ccc;}
.last{border-right: 1px solid #ccc;}
.news{border-width: 5px 1px 0 1px;border-style: solid;border-color: red;height: 25px;}
</style>
</head>
<body>
<ul id="box">
<li><a href="javascript:;">第一个</a><span></span></li>
<li><a href="javascript:;">第二个</a><span></span></li>
<li><a href="javascript:;">第三个</a><span></span></li>
<li><a href="javascript:;">第四个</a><span></span></li>
<li><a href="javascript:;">第五个</a><span></span></li>
<li><a href="javascript:;">第六个</a><span></span></li>
<li><a href="javascript:;">第七个</a><span></span></li>
<li><a href="javascript:;">第八个</a><span></span></li>
<li><a href="javascript:;">第九个</a></li>
</ul>
<div id="container">
<div class="one" style="display:block;">第一个</div>
<div class="two" style="display:none;">第二个</div>
<div class="three" style="display:none;">第三个</div>
<div class="four" style="display:none;">第四个</div>
<div class="five" style="display:none;">第五个</div>
<div class="six" style="display:none;">第六个</div>
<div class="seven" style="display:none;">第七个</div>
<div class="eight" style="display:none;">第八个</div>
<div class="nine" style="display:none;">第九个</div>
</div>
</body>
</html>