복습 중에 제이쿼리가 작동을 안합니다...
안녕하세요..! 필기 시험 합격 후에 제이쿼리 복습 중입니다.
아무리... 제이쿼리 파일을 다시 만들고 작성해봐도 active가 안먹어요... div에 class='box'로 클래스 줘서 해봐도 안되네요... 뭐가 문제일까요...?ㅠㅠ
답변 2
1
태그 선택자와 클래스 선택자가 혼용되는 선택자 지정방식의 문제입니다.
아래에 있는 2가지 중 1가지 방식으로 하시면 됩니다.
가급적이면 2번째 방식이 일반적입니다.
태그선택자 .container div {}로 된 것에 클래스가 붙으면서 .container div.active {} 되지만 태그선택자 .container div에 있는 배경색 background-color: dodgerblue를 .active 들어가지만 작동이 안된겁니다.
.container div에 있는 배경색 background-color: dodgerblue가 최초에 없으면 .active에 따라 색상이 들어가고 빠지고 합니다.
.active는 범용으로 사용되는 대표적인 클래스네임이기 때문에 .container div.active {} 이런 식으로 특정 선택자로 만들어 놓는 것이 좋습니다.
!important는 선택자 지정방식 관계없이 최우선으로 적용하라는건데 가급적이면 !important 사용이 잦은건 좋지 않습니다.
1번 방식)
.active {
background-color: yellow !important;
}
2번 방식)
.container div.active {}
0
코드상 문제는 없어 보이는데요.
캡쳐로 올리지 말고 답글로 복사 붙여넣기 해서 올려주세요.
다시 확인해볼게요.
0
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jquery review</title>
<style>
a {
color: gray;
text-decoration: none;
font-weight: bold;
font-size: 14px;
display: inline-block;
width: 90px;
height: 25px;
line-height: 25px;
text-align: center;
margin: 3px;
background-color: beige;
border-radius: 5px;
}
.container div {
width: 300px;
height: 300px;
background-color: dodgerblue;
border-radius: 5px;
text-align: center;
font-weight: bold;
line-height: 300px;
margin-top: 7px;
color: white;
}
.active {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<a href="#none" class="add-btn">add-btn</a>
<a href="#none" class="remove-btn">remove-btn</a>
<a href="#none" class="toggle-btn">toggle-btn</a>
<div>box</div>
</div>
<script src="script/jquery-1.12.4.js"></script>
<script src="script/customreview.js"></script>
</body>
</html>
여기요..! 제이쿼리는 밑에 있습니다.
$('.add-btn').click(function(){
$('.container div').addClass('active');
});
$('.remove-btn').click(function(){
$('.container div').removeClass('active');
});
$('.toggle-btn').click(function(){
$('.container div').toggleClass('active');
});
해당 강의 PDF는 어디에 있나요?
1
56
2
2026 웹디자인개발기능사 실기 보는데 필요한 텍스트에디터는 무엇인가요?
1
92
2
예제파일
1
55
1
섹션10-77번강의 내 와이어프레임 pdf 자료 다운로드 어디서 하나요?
1
81
2
보더를 사용해 와이어프레임만드는 강의 html+css소스 다운로드 받을 수 있나요?
1
58
1
시험 시 슬라이드 작성 관련 문의
0
64
1
강의 질문 있습니다
1
69
1
시험 관련 문의
1
61
1
파워포인트 자료 다운로드 버튼 어디에 있나요?
1
55
1
브라우저 화면 줄일 시 빈 공간 발생
0
65
1
서브메뉴가 유지되지 못하고 사라지는데 무엇이 문제 일까요?
1
78
1
슬라이드 및 완성본 관련 사항
1
69
2
D유형 레이아웃 연습중인데 슬라이드 이미지 크기가 변하지 않습니다
1
90
3
B-4연습중인데 네비게이션의 a태그 두께가 이상하고 슬라이드 다운시 문제가 있습니다.
1
50
2
A2 연습중인데 메뉴 배경색과 서브메뉴 크기, 갤러리 그림 정리에 문제가 있습니다
1
68
2
A1 레이아웃 연습중인데 overflow: hidden이나 box-sizing: border-box;가 적용되지 않는 것 같습니다
1
55
2
레이어 팝업 '닫기' 가 안됩니다
1
62
1
공지사항과 갤러리 탭(안)구성 중 마우스 클릭시 색상변경이 안됩니다.
1
84
2
뷰티파이 설치 관련 문의
1
71
3
웹디자인 기능사 웹디자인개발기능사로 개편 되었는데 이 수업만 들어도 가능?
1
86
2
A유형~C유형 수험자 제공파일 어디서
1
73
1
A1 작업하는데 와이어프레임이 무너지고, hover일부가 적용 안되고 메뉴바가 슬라이드를 밀어냅니다. 탭메뉴도 작동하지 않습니다..
0
122
4
footer 높이 값
1
47
2
div 상하분배?가 안돼요
0
72
2