JAVASCRIPT&JQUERY

[javascript] select로 탭메뉴 만들기

vbsic5 2020. 1. 29. 22:19

모바일 화면일 때 셀렉트로 컨트롤 가능한 탭기능을 자바스크립트로 만들어 보았다..

 

<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