-
글쓴이글
-
2021년 6월 25일 21:46 #10750
김아정참가자강사님 질문있습니다! tab.js를 연결하려고 강사님과같이 탭기능 밑에 <script src="tab.js"></script>를 넣었는데
tab.js에서 '$'was used before it was defined. 같이 오류가 생기고,
tab.js 코드각각 줄 왼쪽에 엑스표같이 뜹니다ㅠㅠ
그냥 탭기능 밑에 script태그 안에 해당코드를 썼을 때도 물론 작동하고,
tab.js에서 같은 코드를 썼을때도 오류문구가 뜨지만 작동을합니다!
그런데 구글에서 검색해도, 왜 오류가 나는지 잘 모르겠습니다ㅠ
html안에 script태그가 많아서 그런걸까요..?
tab.js
-----------------------------------------------------------------------------------------------
$('.tab-button').eq(0).click(function(){
$('.tab-button').removeClass('active');
$('.tab-content').removeClass('show');$('.tab-button').eq(0).addClass('active');
$('.tab-content').eq(0).addClass('show');});
$('.tab-button').eq(1).click(function(){
$('.tab-button').removeClass('active');
$('.tab-content').removeClass('show');$('.tab-button').eq(1).addClass('active');
$('.tab-content').eq(1).addClass('show');
});$('.tab-button').eq(2).click(function(){
$('.tab-button').removeClass('active');
$('.tab-content').removeClass('show');$('.tab-button').eq(2).addClass('active');
$('.tab-content').eq(2).addClass('show');
});
-------------------------------------------------------------------------------------
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"><!-- Jquery-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script><link href="main.css" rel="stylesheet">
<title>나는 공부중</title>
</head><body>
<!-- 왼쪽 메뉴-->
<div class="left-menu">
<p>menu Title</p>
</div><!-- 모달창-->
<div class="black-background">
<div class="white-background">
<p>로그인 하세요</p><!-- 로그인 폼 -->
<form action="login.php">
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" id="email">
<p class="email-error">이메일란이 공백입니다.</p>
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" id="password">
<p class="password-error">비밀번호가 올바르지 않습니다.</p>
</div>
<button type="submit" class="btn btn-primary">전송</button>
</form><button type="button" class="btn btn-secondary" id="close">닫기</button>
</div>
</div><!-- 네비게이션-->
<div class="nav-menu">
<h4 class="menu-logo">Shirts Studio</h4>
<a id="nav-sub-button">Products</a>
</div><!-- 서브메뉴-->
<ul class="list-group nav-sub">
<li class="list-group-item">Outer</li>
<li class="list-group-item">Innerwear</li>
<li class="list-group-item">Shirts</li>
<li class="list-group-item">Shoes</li>
</ul><!-- 헤더 바꾸기 JS-->
<script>
$(window).on('scroll',function(){if($(window).scrollTop()>100){
$('.nav-menu').addClass('nav-black');
$('.menu-logo').addClass('small-font');}else{
$('.nav-menu').removeClass('nav-black');
$('.menu-logo').removeClass('small-font');
}})
</script>
<!-- 배경화면-->
<div class="jumbotron main-background">
<h1 class="display-4">Shirts Studio</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" id="log-in-button" href="#" role="button">Log In</a>
<a class="btn btn-danger btn-lg" id="show-menu" href="#" role="button">Show Menu</a>
</div><!-- Carousel-->
<h4 class="my-4 text-center">Showcase</h4><div style="overflow: hidden; position: relative;">
<div class="slide-container">
<div class="slide-box"></div>
<div class="slide-box"></div>
<div class="slide-box"></div>
</div><button class="slide-before">Before</button>
<button class="slide-next">Next</button></div>
<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button><!-- 그냥 별거아닌 마진-->
<div class="my-5"></div><!-- 탭기능-->
<div class="container mt-5">
<ul class="list">
<li class="tab-button">Products</li>
<li class="tab-button">Information</li>
<li class="tab-button">Shipping</li>
</ul><div class="tab-content">
<p>상품설명입니다. Product</p>
</div>
<div class="tab-content show">
<p>상품정보입니다. Info</p>
</div>
<div class="tab-content">
<p>배송정보입니다. Shipping</p>
</div>
</div><!-- 탭JS연결-->
<script src="tab.js"></script><!-- 버튼기능 JS-->
<script>let slideContainer = $('.slide-container');
$('.slide-1').click(function(){
slideContainer.css('transform','translateX(0)');
})$('.slide-2').click(function(){
slideContainer.css('transform','translateX(-100vw)');
})$('.slide-3').click(function(){
slideContainer.css('transform','translateX(-200vw)');
})//왼쪽 오른쪽 버튼 구현
// 지금보는 페이지 변수~
let nowPhoto = 0;$('.slide-next').click(function(){
if(nowPhoto<2){
nowPhoto++;
}slideContainer.css('transform','translateX(-${nowPhoto}00vw)');
});$('.slide-before').click(function(){
if(nowPhoto>0){
nowPhoto--;
}
slideContainer.css('transform','translateX(-${nowPhoto}00vw)');
});</script>
<!-- Show menu JS-->
<script>
$('#show-menu').click(function() {
$('.left-menu').animate({
marginLeft: '0px'
});
})
</script><!-- 자바스크립트-->
<script>// 로그인 폼 전송
$('form').on('submit', function(e) {// 이메일검사 변수
let emailVal = $('#email').val();
let emailCheck = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()\.,;\s@\"]+\.{0,1})+([^<>()\.,;:\s@\"]{2,}|[\d\.]+))$/.test(emailVal);// 이메일 공백, 이메일 검사
if(emailVal == ''){
e.preventDefault();
$('.email-error').show().text('이메일란이 공백입니다.');
}else if(emailCheck == false) {
e.preventDefault();
$('.email-error').show().text('이메일이 올바르지 않습니다.');
}// 비밀번호대문자검사 변수
let pswVal = $('#password').val();
let pawCheck = /[A-Z]+/.test(pswVal);// 패스워드 검사
if(pawCheck == false) {
e.preventDefault();
$('.password-error').show();
}})
// 모달열기
let mainModal = $('.black-background');$('#log-in-button').on('click', function() {
mainModal.addClass('slide-down');
});// 모달닫기
$('#close').on('click', function() {
mainModal.removeClass('slide-down');
})// 서브메뉴 열고 닫기
$('#nav-sub-button').click(function() {
$('.nav-sub').slideToggle();
})
</script><!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
--></body></html>
<!--more-->
2021년 6월 25일 23:24 #10753
codingapple키 마스터오류는 아니고 lint 라고 해서 좋지않은 관습 잡아주는 에디터 기본기능인데
이상한 것도 잡아주니 끄도록 합시다
-
글쓴이글
- 답변은 로그인 후 가능합니다.