소개
게시글
질문&답변
2020.09.28
3개의 문에서 질문드려요
감사합니다:) 또 배우고 가네요~ 추석 잘 보내세요!
- 0
- 5
- 152
질문&답변
2020.09.28
3개의 문에서 질문드려요
DOCTYPE html > html lang = "en" > head > meta charset = "UTF-8" > meta name = "viewport" content = "width=!, initial-scale=1.0" > title >Document title > style > * {margin: 0 ;padding: 0 ;box-sizing: border-box;} ul {list-style-type:none;} #wrap { width: 100vw ; height: 100vh ; background-color: # eee ; display:flex; align-items:center; justify-content:center; } .content { width: 30vw ; height: 30vw ; border: 1px solid # 000 ; } .menu { display:flex; } .menu li { width: 25% ; text-align:center; border-right: 1px solid # fff ; height: 25px ; } .menu li a { display:block; color: # fff ; background-color: rgb ( 109 , 198 , 240 ); height: 25px ; text-decoration:none; } .menu li .On a { background-color: # 000 ; } .menu li :last-child { border-right:none; } .box { width: 100% ; height: calc ( 100% - 25px ); position:relative; } .box .inner { position:absolute; width: 100% ; height: 100% ; font-size: 5vw ; justify-content:center; display:flex; align-items:center; opacity: 0 ; } .box .inner.Active { opacity: 1 } .box .inner.b01 { background-color: rgb ( 113 , 156 , 236 ); } .box .inner.b02 { background-color: rgb ( 236 , 113 , 195 ); } .box .inner.b03 { background-color: rgb ( 236 , 199 , 113 ); } .box .inner.b04 { background-color: rgb ( 236 , 172 , 113 ); } style > head > body > div id = "wrap" > div class = "content" > ul class = "menu" > li > a href = "#" class = "btn" > 0menu a > li > li > a href = "#" class = "btn" > 1menu a > li > li > a href = "#" class = "btn" > 2menu a > li > li > a href = "#" class = "btn" > 3menu a > li > ul > ul class = "box" > li class = "inner b01 Active" data-index = "0" >content01 li > li class = "inner b02" data-index = "1" >content02 li > li class = "inner b03" data-index = "2" >content03 li > li class = "inner b04" data-index = "3" >content04 li > ul > div > div > script > ( function (){ const menuList = document. querySelector ( '.menu' ); let currentItem; const content = document. querySelector ( '.box' ); const inner = content. childNodes ; console. log (inner); function handler (e){ const targetElem = e. target ; // console.log(targetElem); if (currentItem){ currentItem. classList . remove ( 'On' ); } if (targetElem. classList . contains ( 'btn' )){ targetElem. parentNode . classList . add ( 'On' ); currentItem = targetElem. parentNode ; } } menuList. addEventListener ( 'click' ,handler); // data-index 추가 menuList. querySelectorAll ( ".btn" ). forEach ( function (item, i) { item. dataset . index = i; console. log (i) if (content. childNodes . classList . contains ( 'inner' )){ content. childNodes . dataset . index [i]. classList . add ( 'Active' ) } }); })() script > body > html > 이렇게 쓰니 에러가 뜨네요~ ㅜㅜ 자식요소의 dataset중 index가 i 인 아이한테 클래스 붙여라라고 생각한건데 잘못된 점이 무었일까요
- 0
- 5
- 152
질문&답변
2020.09.10
top/left 와 bottom/right 쪽 mousemove가 잘 안되는거 같아서요. code에 문제가 있는지 한번 봐주시면 감사하겠습니다.
으 다 오타 때문이네요 감사해요!
- 0
- 2
- 98
질문&답변
2020.09.10
1분이가 계속 한자리에만 생기는데요. info.xPos가 일분이에게 안들어가는거 같아요. 놓친부분이 있는거겠죠?
감사합니다!
- 0
- 2
- 100