728x90
1. display
<body>
<button type="button" id="displayBtn"> 보이게 하기 </button>
<div class = "view">
<h1> 안녕하세요 </h1>
</div>
<div class ="view" style="display: none;">
<h1> 한국 스마트 정보 교육원 </h1>
</div>
<script type="text/javascript">
var displayBtn = document.getElementById('displayBtn');
displayBtn.addEventListener('click',function(){
var view = document.getElementsByClassName('view');
for(var i=0;i<view.length;i++){
if(view[i].style.display == 'none'){
view[i].style.display = 'block';
}else{
view[i].style.display = 'none';
}
}
});
</script>2. 복수 이벤트
<!-- 복수 이벤트 접근 할 때 -->
<button type="button" class="btn" value="0"> 버튼 1 </button>
<button type="button" class="btn" value="1"> 버튼 2</button>
<div id = "displayDiv01">
<h1> 햇빛맛집 </h1>
</div>
<div id = "displayDiv02" style="display: none;">
<h1> 야경맛집 </h1>
</div>
<script type="text/javascript">
var btn = document.getElementsByClassName('btn');
for(var i =0; i <btn.length; i++){
btn[i].addEventListener('click',function(){
//버튼의 value 값을 가지고 온다. 버튼의 value 값은 index와 맞춰서 작업해놨다.
var displayDiv01 = document.getElementById('displayDiv01');
var displayDiv02 = document.getElementById('displayDiv02');
console.log(this.value);
if(this.value == '0'){
displayDiv01.style.display = 'block';
displayDiv02.style.display = 'none';
}else{
displayDiv01.style.display = 'none';
displayDiv02.style.display = 'block';
}
});
}
</script>
3. tab
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>탭버튼 만들기</title>
</head>
<body>
<!--
실습3. 3개의 버튼과 3개의 div객체가 있다.
각각 버튼을 클릭시 div객체의 인덱스와 버튼의 인덱스가 일치하는
div객체만 display 되게 하여라.
-->
<button type="button" class="displayBtn" value="0">공지사항</button>
<button type="button" class="displayBtn" value="1">자유게시판</button>
<button type="button" class="displayBtn" value="2">뉴스</button>
<div id="notice">
<div>1 '비상' 14차례 언급한 문 대통령…"이것저것 따질 계제 아니다"</div>
<div>2 "한선교, 계획된 뒤통수"…흠모한 선배라던 황교안과 무슨일</div>
<div>3 이인영 "추경 못하면 역사의 죄인" 심재철 "국민 손에 돈 쥐어줄 궁리만 해"</div>
<div>4 文대통령 "비상경제시국"…개학 2주 연기로 가닥</div>
</div>
<div id="free" style="display: none;">
<div>5 [단독] 황교안 격노·사천 비판에 한선교 “젊음과 전문성에 치중”</div>
<div>6 황교안-한선교 공천 갈등 '폭발'…통합당, 해법 찾기 고심</div>
<div>7 이해찬의 '내로남불'</div>
<div>8 심상정 "꼼수가 꼼수 낳는 참담한 상황…어려워도 원</div>
</div>
<div id="news" style="display: none;">
<div>[코로나19] “팬데믹도 막을 수 없다”…삼성·SK하이닉스 신공장 준비 ‘이상 無’ </div>
<div>국제유가 반토막인데 휘발유 가격은 여전히 1500원대…왜? 포토 </div>
<div>다중주택의 필로티 주차장 층수에서 제외된다 포토 한국일보</div>
<div>대구·경북 가던 특별공급 마스크, 수도권 약국에 푼다(종합) 포토 </div>
</div>
<script type="text/javascript">
var displayBtn = document.getElementsByClassName('displayBtn');
for(var i =0; i<displayBtn.length; i++){
displayBtn[i].addEventListener('click',function(){
var notice = document.getElementById('notice');
var free = document.getElementById('free');
var news = document.getElementById('news');
console.log(this.value);
if(this.value == '0'){
notice.style.display = 'block';
free.style.display = 'none';
news.style.display = 'none';
}else if(this.value == '1'){
notice.style.display = 'none';
free.style.display = 'block';
news.style.display = 'none';
}else{
notice.style.display = 'none';
free.style.display = 'none';
news.style.display = 'block';
}
});
}
</script>
</body>
</html>반응형
'Frontend > Javascript' 카테고리의 다른 글
| javascript 이벤트 실습 (0) | 2020.03.17 |
|---|---|
| javascript 문자열 객체 (0) | 2020.03.17 |
| javascript - 문서 객체 모델 style (0) | 2020.03.17 |
| javascript -document 문서객체 모델 (0) | 2020.03.16 |
| java script 반복문 (0) | 2020.03.09 |
댓글