2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
글쓴이글
-
2023년 11월 23일 10:51 #104838
강주희참가자[detail.html]
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap demo</title> <link rel = "stylesheet" href="main.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> </head> <body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> <style> ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc; } ul.list::after { content: ''; display: block; clear: both; } .tab-button { display: block; padding: 10px 20px 10px 20px; float: left; margin-right: -1px; margin-bottom: -1px; color: grey; text-decoration: none; cursor: pointer; } .orange { border-top: 2px solid orange; border-right: 1px solid #ccc; border-bottom: 1px solid white; border-left: 1px solid #ccc; color: black; margin-top: -2px; } .tab-content { display: none; padding: 10px; } .show { display: block; } </style> <div class="container mt-5"> <ul class="list"> <li class="tab-button" >Products <li class="tab-button orange">Information <li class="tab-button">Shipping <div class="tab-content"> <p>상품설명입니다. Product</p> </div> <div class="tab-content show "> <p>스펙설명입니다. Information</p> </div> <div class="tab-content"> <p>배송정보입니다. Shipping</p> </div> </div> </body><script src = "tab.js"></script> </html> [tab.js]
/* 버튼 0 누르면 - 모든 버튼에 붙은 orange 클래스 명 제거 - 버튼 0에 클래스 명 추가 - 모든 div에 붙은 show 클래스 명 제거 - div0에 show 클래스 명 추가 */ document.getElementsByClassName('tab-button')[0].addEventListener('click',function(){ document.getElementsByClassName('tab-button').classList.remove('orange'); document.getElementsByClassName('tab-button')[0].classList.add('orange'); document.getElementsByClassName('tab-content').classList.remove('show'); document.getElementsByClassName('tab-content')[0].classList.add('show'); })document.getElementsByClassName('tab-button')[1].addEventListener('click',function(){ document.getElementsByClassName('tab-button').classList.remove('orange'); document.getElementsByClassName('tab-button')[1].classList.add('orange'); document.getElementsByClassName('tab-content').classList.remove('show'); document.getElementsByClassName('tab-content')[1].classList.add('show'); })document.getElementsByClassName('tab-button')[2].addEventListener('click',function(){ document.getElementsByClassName('tab-button').classList.remove('orange'); document.getElementsByClassName('tab-button')[2].classList.add('orange'); document.getElementsByClassName('tab-content').classList.remove('show'); document.getElementsByClassName('tab-content')[2].classList.add('show'); })저는 jQuery를 사용하지 않고 자바스크립트로만 코드를 작성했는데 다른 버튼들이 눌리지 않습니다. 어떤 부분이 잘못 되었을까요?
-
글쓴이글
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.