HTML a 태그 href 대신 스크립트 실행하기

HTML a 태그 href 대신 스크립트 실행하기

1 예시

<style>
.btn-greet {
    display: inline-block;
    border: 1px solid gray;
    border-radius: 3px;
    padding: .2em .5em .3em;
    cursor: pointer;
}
#hello{
  

  padding:8px;
  background-color:yellow;
}
</style>
<script src='//code.jquery.com/jquery.min.js'></script>
<script>
$(function() {
    $('.btn-greet').click(function() {
        alert('안녕');
    });
});
</script>

<a class='btn-greet'>인사버튼1</a>
<a class='btn-greet' href='http://google.com'>인사버튼2</a>
<br>

<a href="javascript:$('#hello').slideToggle();">토글버튼1</a>
<!-- IE에서는 [Object object] 에러 발생. 밑의 방법을 권장.-->

<a href="javascript:void(0);" onclick="$('#hello').slideToggle();">토글버튼2</a>
<!-- IE에서의 [Object object] 에러 방지. -->

<div id="hello" >토글버튼을 누르면 나타나거나 사라집니다.</div>

2 같이 보기

• HTML a 태그