FRONT TO BACK END!

전체 글

SEO 메타태그 & 파비콘 2020.03.11
[javascript] select option 홈페이지 이동기능 2020.02.01
[javascript] select로 탭메뉴 만들기 2020.01.29

SEO 메타태그 & 파비콘

2020. 3. 11. 21:50

파비콘은 여기서..

https://www.favicon-generator.org/

'HTML&CSS' 카테고리의 다른 글

li 개수에 따라서 width값 설정하기 (0)	2020.03.11
SEO (0)	2019.08.13

[javascript] select option 홈페이지 이동기능

2020. 2. 1. 18:03

1
2
3
4
5
6
7
8
9

<select name="" id="scltList" title="포털 리스트">
 
<option value="x" selected="selected" id="slct">--선택--</option>
<option value="http://www.naver.com">네이버</option>
<option value="http://www.google.co.kr/">구글</option>
<option value="http://www.daum.net/">다음</option>
 
</select>
        
Colored by Color Scripter

cs

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script type="text/javascript">
 
/* select tab function */
var selectTab = document.getElementById("scltList"); // 셀렉트를 변수에 저장
    
selectTab.addEventListener("change",function(){ // change 이벤트 발생
 
    var val = selectTab.options[selectTab.selectedIndex].value; // option value값 저장
 
    if(val != "x" ){ // value값이 x가 아닐 때 
 
    window.open(val); // 새 창으로 홈페이지 띄움
        
    document.getElementById("slct").selected = true; // 선택한 옵션을 제일 처음으로 바꿔줌.    
 
    }    
    
});
    
</script>
Colored by Color Scripter

cs

셀렉트를 이용하여 홈페이지를 이동시키는 기능입니다.

1. 셀렉트 내 옵션을 선택 할 때 value값이 x가 아니면

window.open을 이용하여 새 창으로 url로 이동

2. 이동 후 제일 첫번째 옵션으로 재선택됨

'JAVASCRIPT&JQUERY' 카테고리의 다른 글

[JAVASCRIPT] Form Validator 폼 유효성 검사 함수 (6)	2024.11.16
[JAVASCRIPT] 브라우저 zoom in / zoom out 기능 (1)	2020.10.21
[javascript] select로 탭메뉴 만들기 (0)	2020.01.29
탭기능구현 (addClass / removeClass) (0)	2019.07.10
mega menu, full wide dropdown menu (0)	2019.03.11

[javascript] select로 탭메뉴 만들기

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>
Colored by Color Scripter

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>
Colored by Color Scripter

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

PREV 1 ···7 8 9 10 11 12 13 NEXT

FRONT TO BACK END!

전체 글

SEO 메타태그 & 파비콘

'HTML&CSS' 카테고리의 다른 글

[javascript] select option 홈페이지 이동기능

'JAVASCRIPT&JQUERY' 카테고리의 다른 글

[javascript] select로 탭메뉴 만들기

'JAVASCRIPT&JQUERY' 카테고리의 다른 글

+ Recent posts

티스토리툴바