세로형
Notice
Recent Posts
Recent Comments
Link
04-25 01:17
«   2024/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

꿈 많은 사람의 이야기

자바스크립트 마우스 클릭(click), out, 오버(over)시 색상 변경 본문

javascript

자바스크립트 마우스 클릭(click), out, 오버(over)시 색상 변경

이수진의 블로그 2017. 8. 21. 08:56









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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
        #topMenu ul{
            overflow: hidden;
        }
        
        #topMenu li{
            width: 200px;
            height: 40px;
            border: 1px solid red;
            float: left;
            background-color: gray;
        }
        
        
    </style>
    
    <script>
 
        var menuStr = ['HOME','GALLERY','PROFILE','GUEST','BOARD'];//배열
        window.onload = function(){
            var topMenu = document.getElementById('topMenu');  //탑메뉴 객체생성
            var ul = document.createElement("ul");
            //ul 객체 생성
            topMenu.appendChild(ul);
            //부모에 추가
            var tmpli = null;
            for(var i = 0 ; i < menuStr.length ; i++){
                li = document.createElement("li");
                //li 객체를 생성
                li.innerText = menuStr[i];
                li.style.listStyle = "none";
                li.style.textAlign = "center";
                li.style.lineHeight = "40px";
                
                ul.appendChild(li);
                //ul에 추가.
                
            }
            
            var ulview = ul.getElementsByTagName("li");
            
            for(var i = 0 ; i < ulview.length ; i++){
                ulview[i].onmouseover = function(){
                    if(this != tmpli){
                        this.style.backgroundColor = "yellow";
                    }
                    
                }
                
                ulview[i].onmouseout = function(){
                    
                    if(this != tmpli){   //tmpli 가 없으면 저 색깔로 변하고
                        this.style.backgroundColor = "gray";
                    }
                }
                
                ulview[i].onclick = function(){
                    if(tmpli != null){      //null이 아니면 tmp가 담아둔걸 gray로 다시 바꾸고
                        tmpli.style.background = "gray";
                        this.style.backgroundColor = "red";  //현재값을 red로 하고
                        tmpli = this;  //tmp 초기화
                    }
                    else{
                        this.style.backgroundColor = "red";
                        tmpli = this;  //클릭했을때 해당 객체를 넣는다.
                    }
                    
                }
            }
 
            
            //li태그 자동으로 추가하고
            //마우스 올라갈 때 배경색 바뀜
        };
    </script>
    
</head>
<body>
   
   <div id = "page">
       
       <div id="header">
           
           <h1>메뉴바 테스트</h1>
           <div id="topMenu">
               
           </div>
       </div>
       
   </div>
    
</body>
</html>
Colored by Color Scripter
cs


반응형
그리드형
저작자표시

'javascript' 카테고리의 다른 글

자바스크립트 이미지 슬라이드(javascript image slide)  (0) 2017.08.22
자바스크립트 구구단 출력해보기  (0) 2017.08.22
자바스크립트 마우스 오버시 이미지 변경(javascript onmouseover)  (0) 2017.08.21
자바스크립트로 간단한 퍼즐게임 만들기  (5) 2017.08.21
자바스크립트 Math  (0) 2017.08.16
공유하기 링크
'javascript' Related Articles more
Comments