menu3 [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. [jQuery] data-tab 활용 탭 메뉴(tabs menu) data-tab 을 활용한 탭 메뉴(tabs menu) 구현 [html] menu1 menu2 menu3 menu 1 menu 2 menu 3 [css] *{ margin: 0; padding: 0; } ul{ display: flex; gap: 20px; position: relative; } li{ list-style: none; } li.on a{ font-weight: bold; color: red; } .content{ display: none; width: 300px; height: 300px; padding: 10px; margin-top: 10px; border: 1px solid black; } .content.on{ display: block; } [js] $('li').click(fu.. 2023. 8. 5. [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 다음 728x90
