가로, 세로 tab 메뉴 비교
웹<!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->
| https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs | https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs |
| <style> | <style> |
| * {box-sizing: border-box} | |
| /* Style the tab */ | /* Style the tab */ |
| .tab { | .tab { |
| overflow: hidden; | |
| float: left; | |
| border: 1px solid #ccc; | border: 1px solid #ccc; |
| background-color: #f1f1f1; | background-color: #f1f1f1; |
| width: 30%; | |
| height: 300px; | |
| } | } |
| /* Style the buttons inside the tab */ | /* Style the buttons inside the tab */ |
| .tab button { | .tab button { |
| display: block; | |
| background-color: inherit; | background-color: inherit; |
| float: left; | |
| color: black; | |
| padding: 14px 16px; | padding: 22px 16px; |
| width: 100%; | |
| border: none; | border: none; |
| outline: none; | outline: none; |
| text-align: left; | |
| cursor: pointer; | cursor: pointer; |
| transition: 0.3s; | transition: 0.3s; |
| font-size: 17px; | font-size: 17px; |
| } | } |
| /* Change background color of buttons on hover */ | /* Change background color of buttons on hover */ |
| .tab button:hover { | .tab button:hover { |
| background-color: #ddd; | background-color: #ddd; |
| } | } |
| /* Create an active/current tablink class */ | /* Create an active/current "tab button" class */ |
| .tab button.active { | .tab button.active { |
| background-color: #ccc; | background-color: #ccc; |
| } | } |
| /* Style the tab content */ | /* Style the tab content */ |
| .tabcontent { | .tabcontent { |
| display: none; | |
| float: left; | |
| padding: 6px 12px; | padding: 0px 12px; |
| border: 1px solid #ccc; | border: 1px solid #ccc; |
| border-top: none; | |
| border-left: none; | |
| width: 70%; | |
| height: 300px; | |
| } | } |
| </style> | </style> |
| <script> | <script> |
| function openCity(evt, cityName) { | function openCity(evt, cityName) { |
| var i, tabcontent, tablinks; | var i, tabcontent, tablinks; |
| tabcontent = document.getElementsByClassName("tabcontent"); | tabcontent = document.getElementsByClassName("tabcontent"); |
| for (i = 0; i < tabcontent.length; i++) { | for (i = 0; i < tabcontent.length; i++) { |
| tabcontent[i].style.display = "none"; | tabcontent[i].style.display = "none"; |
| } | } |
| tablinks = document.getElementsByClassName("tablinks"); | tablinks = document.getElementsByClassName("tablinks"); |
| for (i = 0; i < tablinks.length; i++) { | for (i = 0; i < tablinks.length; i++) { |
| tablinks[i].className = tablinks[i].className.replace(" active", ""); | tablinks[i].className = tablinks[i].className.replace(" active", ""); |
| } | } |
| document.getElementById(cityName).style.display = "block"; | document.getElementById(cityName).style.display = "block"; |
| evt.currentTarget.className += " active"; | evt.currentTarget.className += " active"; |
| } | } |
| </script> | </script> |
'웹' 카테고리의 다른 글
| 퍼즐 게임 분석 (0) | 2019.07.11 |
|---|---|
| 그림 위에 텍스트, 그림 덧붙이기 overlay text, image over image (0) | 2019.07.11 |
| 자바스크립트 테트리스 코드 분석 (0) | 2019.03.16 |
| 자바스크립트 테트리스 코드 분석 (0) | 2019.03.12 |
| mathjax 예제 (0) | 2017.11.27 |