728x90 반응형 자바스크립트2 [JavaScript] siblings() 함수 활용 탭 메뉴 (Tabs) 구성 siblings() 함수(function)로 형제요소를 선택하여 탭 메뉴(Tabs) 구성하는 방법 [html] tab#1 tab#1 content tab#2 tab#2 content tab#3 tab#3 content [css] * { margin: 0; padding: 0; } ul, li { list-style: none; } ul { display: flex; gap: 2rem; position: relative; } .content { display: none; position: absolute; top: 1.5rem; left: 0; } .tab.active .content { display: block; } [js] function siblings(t) { var children = t.par.. 2023. 10. 31. [JavaScript] forEach 활용 탭 메뉴 (Tabs) 구성 자바스크립트의 forEach를 활용하여 탭 메뉴 구성하기 [html] tab1 tab1 content tab2 tab2 content tab3 tab3 content [css] ul { position: relative; padding: 0; } li { list-style: none; } a{ color: inherit; text-decoration: none; } .tab-menu { display: flex; justify-content: space-between; width: 200px; } .tab.active { color: red; text-decoration: underline; } .content { display: none; position: absolute; left: 0; top: .. 2023. 7. 8. 이전 1 다음
