버튼 문의 드립니다.

버튼 문의 드립니다.

QA

버튼 문의 드립니다.

본문

<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 태그를 클릭할 수 있도록 하는겁니다.

그러면 버튼 클릭시  메뉴클릭과 똑같은 에니메이션과, 엑티베이트 까지 같이 동작 하겠죠.

답변을 작성하시기 전에 로그인 해주세요.
전체 123,127 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT