Tabs | jQuery UI
Tabs A single content area with multiple panels, each associated with a header in a list. Click tabs to swap between content that is broken into logical sections. view source 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
jqueryui.com
HTML에는 부트스트랩이 있다면 JS에는 이게 있다. 신기한 기능들이 많아 하나씩 공부해보려고한다.
내가 아는 jQuery의 지식은 $("h3") 은 document.getElementsByTagName("h3") 뭐 이거의 줄임이라고 까지만 안다...
accordion
See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen.
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 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Accordion - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <script> $( function() { $( "#accordion" ).accordion(); $("h3").click(function(){ if($(this).text()=='Section 1'){ alert("hello~ jQuery💗"); } if($(this).text()=='Section 2'){ $(this).html("<b> Click 2~ </b>"); } if($(this).text()=='Section 3'){ $(this).html("<b> Eazy💗 </b>"); } if($(this).text()=='Section 4'){ $(this).html("<b> 간단해 </b>"); } }); } ); </script> </head> <body> <div id="accordion" style="width: 500px; text-align: center;"> <h3>Section 1</h3> <div> <p> 알림창 띄우기 </p> </div> <h3>Section 2</h3> <div> <p> 섹션 2요~ </p> </div> <h3>Section 3</h3> <div> <p> 쉽다 </p> </div> <h3>Section 4</h3> <div> <p> 간단 편리 </p> <p> </p> </div> </div> </body> </html> | cs |
1. $( function() { .... } );
jQuery의 $(document).ready() 함수를 사용해 문서가 로드되면 코드가 실행되도록한다.
이렇게 하면 페이지의 모든 요소가 준비된 다음에 스크립트가 실행된다.
* $(document).ready() 아래 설명
[jQuery] 가장 기초적인 $( function() { .... } 에 대해
$( function() {... } 란? 자바스크립트의 $(document).ready(function() { ... }); 을 축약한 jQuery이다. HTML 삽입 미리보기할 수 없는 소스 두 코드 모두 웹 페이지의 DOM 요소가 완전히 로드 되었을 때 실행된다는
bright-landscape.tistory.com
2. $("#accordion").accordion();
이 코드는 #accordion라는 HTML 요소를 accordion으로 변환하는 jQuery UI의 accordion() 메서드를 호출한다.
이렇게 하면 페이지의 div 요소 중 id가 "accordion"인 요소가 accordion UI로 변환되어 접히고 펼쳐지는 형태로 보인다.
3. $("h3").click(function(){ ... });
이 코드는 모든 h3 요소에 대한 클릭 이벤트 핸들러를 정의합니다.
4. if($(this).text()=='Section 1'){ ... }
클릭한 h3 요소의 텍스트를 가져와서 비교한다. 만약 텍스트가 "Section 1"이면 다음 코드 블록을 실행한다.
이 부분은 "Section 1"을 클릭했을 때 "hello~ jQuery💗"라는 알림창을 띄워주는 역할을 한다.
그 아래 2, 3, 4 도 같은 형태이다.
'✨ Front-end > jQuery' 카테고리의 다른 글
| [jQuery] JSON 표기법, 임시 회원으로 로그인 성공, 실패 처리해보기 (0) | 2023.09.04 |
|---|---|
| [jQuery] var( ) 비밀번호 일치 여부 확인하기, (중복체크) (0) | 2023.09.04 |
| [jQuery] innerHTML, text 바꾸기 (0) | 2023.09.04 |
| [jQuery] 보이기 숨기기 기능 (show, hide, toggle, slideup, fade) (0) | 2023.09.04 |
| [jQuery] 가장 기초적인 $( function() { .... } 에 대해 (0) | 2023.09.04 |
댓글