버튼 문의 드립니다.
본문
<div class="text-center"><div class="form"><button type="submit">견적문의</button></div></div>
이렇게 돼있는데요 원페이지형 사이트 입니다.
이걸 누르면 #contact 로 링크돼서 해당페이지로 가게 하려고 하거든요
메뉴에서는 #contact 해서 누르면 가집니다
버튼은 어떻게 해야할지 모르겠어요 ㅜㅜ
답변 2
버튼을 쓰는 이유는 디자인 때문에 그러신건가요?
그런 이유가 아니라면 단순히 다음과 같이 해도 됩니다.
<div class="text-center"><div class="form"><a href="#contact">견적문의</a></div></div>
버튼 타입이 submit 이면 form을 submit 하기 때문에 form의 target 으로 페이지가 이동됩니다.
a 태그로 바꾸셔서 a 태그에 디자인을 입히시면 됩니다.
페이지를 볼 수 있었음 button에 입혀진 스타일을도 적어 드릴 수 있을텐데... ^^
<style>
.a-div {margin-bottom: 50px;}
.a-button {background: #18d26e; border: 0; padding: 10px 30px; color: #fff; transition: 0.4s; cursor: pointer;}
.a-button:hover {background: #13a456;}
</style>
<div class="text-center"><div class="form a-div"><a href="#contact" class="a-button">견적문의</a></div></div>
이런식으로 디자인을 입히면 돼는데요. 근데 이건 단순히 그런 문제가 아니예요. 보니깐. 좀이따 더 답변을 드리겠습니다.
더 답변을 드리면 상단에 <li class=""><a href="#contact">견적문의</a></li> 를 클릭하면 에니메이션 이벤트에 의해 하단으로 가는 구조인데. 다른 영역의 a 태그에 href="#contact" 를 입히면 에니메이션 없이 링크로 갑니다. 상단 주소줄도 바뀌겠죠.
<li class=""><a href="#contact">견적문의</a></li> 는 아마 어떤 js에 의해 동작하는거 같은데 정확히는 못찾겠네요. 페이지만 봐서는 ... 그래서 다음과 같이 생각 해볼수 있어요.
<li class=""><a href="#contact" class="contact">견적문의</a></li> 에 클레스를 입히고 id 입히시면 안됩니다. 여기서 ID는 이동할 영역이 되므로
<div class="text-center"><div class="form"><button type="submit" onclick="menuActive('contact')">견적문의</button></div></div>
이렇게 submit 버튼을 클릭시 menuActive('contact') 함수가 호출될 수 있도록 합니다.
사실 태그에 onclick 이벤트를 직접 먹이는게 저는 지양하는 편이긴 하나 이해를 돕기 설명 드릴꼐요.
다음은 스크립트입니다.
<script>
function menuActive(node){
$("."+node).click();
}
</script>
즉 해당 버튼을 누리면 메뉴의 견적문의 a 태그를 클릭할 수 있도록 하는겁니다.
그러면 버튼 클릭시 메뉴클릭과 똑같은 에니메이션과, 엑티베이트 까지 같이 동작 하겠죠.
