[javascript] 관련사이트바로가기 이동하기버튼

셀렉트박스 선택 후 이동하기 버튼 눌렸을 때 이동하는 js

 

#html

function open_link(id){
   if(id !=''){
      if(document.getElementById(id).value !="" && document.getElementById(id).value != null){
       //id가 가진 value값이 비어있지않고 null이아닐때
         var openNewWindow = window.open("about:blank"); //window.open(url, name, specs, replace);
	     openNewWindow.location.href=document.getElementById(id).value;
	  }
	  return false;
	}
}

 

#js

<div class="shortcuts">
  <label for="siteLink" class="blind">관련사이트</label>
  <select id="siteLink" name="select_site" title="원하시는 관련사이트를 선택 후, 이동버튼을 클릭하시면 해당 사이트로 이동됩니다.">
    <option value="" selected="selected">관련사이트</option>
    <option value="http://www.president.go.kr/">청와대</option>
    <option value="https://www.gwanghwamoon1st.go.kr/front/main/index.do">광화문 1번가</option>
   </select>
   <a href="#moveDept" onclick="javascript:open_link('siteLink');">이동</a>
  </div>
  
  

#css

div.shortcuts{position:absolute;top:12px;left:10px;}
div.shortcuts select{width:160px;font-size:0.875em;padding:0px 0px 0px 5px;line-height:32px;height:32px;font-size:0.875em;font-weight:normal;border:1px solid #8b8d90;color:#666;}
div.shortcuts a{background:#446ec6;color:#fff;font-size:0.9em;padding:0px 7px;font-weight:bold;height:32px;line-height:32px;display:inline-block;position:relative;top:0;left:-6px;}
div.shortcuts a:hover{background:#35518b;}

.blind {position:absolute; overflow:hidden; margin:-1px; border:0; padding:0; width:1px; height:1px; clip:rect(0 0 0 0);}