[재질문] 버튼 문의 드립니다.
본문
<div class="text-center"><div class="form"><button type="submit">견적문의</button></div></div>
이렇게 돼있는데요 원페이지형 사이트 입니다.
이걸 누르면 #contact 로 링크돼서 해당페이지로 가게 하려고 하거든요
메뉴에서는 #contact 해서 누르면 가집니다
버튼은 어떻게 해야할지 모르겠어요 ㅜㅜ
추가 --- 버튼을 사용하는 이유는 이 디자인을 원해서 입니다.^^
답변 1
더 답변을 드리면 상단에 <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 태그를 클릭할 수 있도록 하는겁니다.
그러면 버튼 클릭시 메뉴클릭과 똑같은 에니메이션과, 엑티베이트 까지 같이 동작 하겠죠.