작동영상....
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
|
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
#tab-menu {
list-style: none;
}
#tab-menu li {
width:96px;
height:44px;
background-position-y:0;
text-indent: -1000px;
overflow: hidden;
display: inline-block;
float:left;
}
#tab-menu li:hover {
background-position-y: -44px;
}
#tab-menu li.select {
background-position-y: -88px;
height:80px;
}
#tab-menu li.menuitem1 {
background-image: url(./images/newbtn.bar.1.png);
}
#tab-menu li.menuitem2 {
background-image: url(./images/newbtn.bar.2.png);
}
#tab-menu li.menuitem3 {
background-image: url(./images/newbtn.bar.3.png);
}
#tab-menu li.menuitem4 {
background-image: url(./images/newbtn.bar.4.png);
}
#tab-menu li.menuitem5 {
background-image: url(./images/newbtn.bar.5.png);
}
#tab-menu li.menuitem6 {
background-image: url(./images/newbtn.bar.6.png);
}
</style>
<script>
$(document).ready(function(){
alert("test");
var before;
$("li").click(function(){
$(before).removeClass('select');
before=$(this).addClass('select');
});
});
</script>
</head>
<body>
<ul id="tab-menu">
<li class="menuitem1">google</li>
<li class="menuitem2">facebook</li>
<li class="menuitem3">pinterest</li>
<li class="menuitem4">twitter</li>
<li class="menuitem5">airbnb</li>
<li class="menuitem6">path</li>
</ul>
</body>
</html>
| cs |
css에서 불러오는 이미지
마우스 버튼이 닿지 않을떄는 가장 위의 모양이 된다마우스가 닿으면 가운데 그림처럼 불이 들어오고마우스가 클릭되어지면 아래처럼 갈색으로 변하면서 커진다.우선 닿지 않을떄랑 닿을때는 css에서 처리를 해주었다.닿을 경우는 hover가 되기때문에 li:hover를 해주었다.그리고 클릭했을때 css를 li.select로 해주었다.즉 select를 클릭되어진 태그로 옮겨주기만 하면된다.
| cs |
먼저 8번째 줄이 없다고 하자 8번째 줄이 없으면 클릭된 각각의 버튼이 다 마지막 그림을 띌것이다.클릭이 됬을때는 addClass를 이용하여 select라는 클래스명을 추가한다.추가가 되었기 때문에 css에서 li.select의 효과를 받게된다.
8번째 줄이 없다고 가정을 하고 addClass만 해준다면계속클릭을 했다면 이런 모양이 될것이다.그럼 이제 이전에 있던 버튼의 select를 지우자removeClass를 이용하면 된다.그럼 이제 버튼 class에 select가 붙을때 이것을 변수에 저장을 하고태그가 클릭이 됬을때 이전에 select가 달려있던 버튼의 select를 지우고 새로 달면서 그것을 다시 변수에 집어 넣어준다.
댓글
댓글 쓰기