모바일 화면일 때 셀렉트로 컨트롤 가능한 탭기능을 자바스크립트로 만들어 보았다..
<CSS>
1 2 3 4 5 6 | <style> .con_cmn {display:none} .con1 {display:block;} </style> | cs |
<HTML>
|
1
2
3
4
5
6
7
8
9
10
11
|
<select name="" id="selectTab" class="select_tab" title="교육과정 선택 구분">
<option value="x">-- 선택 --</option>
<option value="0" id="tab1">야구</option>
<option value="1">축구</option>
<option value="2">농구</option>
</select>
<!--//select_tab-->
<div class="con_cmn con1">야구 콘텐츠</div>
<div class="con_cmn con2">축구 콘텐츠</div>
<div class="con_cmn con3">농구 콘텐츠</div>
|
cs |
<JAVASCRIPT>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<script type="text/javascript">
/* select tab function */
var selectTab = document.getElementById("selectTab"); // select 저장
var con = document.getElementsByClassName("con_cmn"); // select 에 대응하는 콘텐츠 요소들 저장
selectTab.addEventListener("change",function(){ // selecㅅ가 변화할 때
var val = selectTab.options[selectTab.selectedIndex].value; // option value값
for (var i = 0;i<selectTab.length-1; i++){ // select가 4개, 콘텐츠가 3개이기때문에 length-1
con[i].style.display = "none" ; // 콘텐츠 모두 숨김
if(val == i ) { // select에 해당하는 콘텐츠가 보여짐
con[i].style.display = "block" ;
} else if (val == "x" ){ // value값이 x인 첫번째 option을 선택 했을 때
con[0].style.display = "block" ; // 1번째 콘텐츠 보여주고
document.getElementById("tab1").selected = true; // select는 첫번째를 선택
}
}
});
</script>
|
cs |
반응형
'JAVASCRIPT&JQUERY' 카테고리의 다른 글
| [JAVASCRIPT] 브라우저 zoom in / zoom out 기능 (1) | 2020.10.21 |
|---|---|
| [javascript] select option 홈페이지 이동기능 (0) | 2020.02.01 |
| 탭기능구현 (addClass / removeClass) (0) | 2019.07.10 |
| mega menu, full wide dropdown menu (0) | 2019.03.11 |
| fade slide (0) | 2018.07.13 |