728x90
반응형
<!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
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<button id="test-btn">버튼</button>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"
></script>
<script src="index.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
</body>
</html>function 알림창열기(구멍) {
document.getElementById("alert").style.display = 구멍;
}
function 아이디알림창() {
document.getElementsByClassName("title1").innerHTML = "아이디입력하셈";
document.getElementById("alert").style.display = "block";
}
function 비번알림창() {
document.getElementById("title").innerHTML = "비번입력하셈";
document.getElementById("alert").style.display = "block";
}
// 서브 메뉴 만들어보기
document
.querySelector(".navbar-toggler")
.addEventListener("click", function () {
document.querySelectorAll(".list-group")[0].classList.toggle("show");
});
//제이쿼리
$("#test-btn").on("click", function () {
$(".hello").hide();
});코드의 <script> 순서를 확인하세요. jQuery를 Bootstrap 보다 먼저 로드하는 것이 좋습니다.
그리고 jQuery 코드를 문서가 완전히 로드된 후 실행되도록 하세요.
여기서 문제가 될 수 있는 부분은 index.js 파일이나 다른 스크립트 파일이 로드되기 전에 jQuery 코드가 실행되어서입니다. 만약 index.js 파일에서 구멍 또는 title1, title, alert와 관련된 요소를 정의했다면, 이것이 오류를 발생시킬 수 있습니다. 만약 이러한 요소들이 존재하지 않으면 해당 코드가 작동하지 않을 것입니다.
<!-- jQuery 먼저 로드 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="index.js"></script>
<!-- 그 다음에 Bootstrap JavaScript 로드 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
728x90
반응형