2011-03-04 3 views
2

그래서 저는 .toggleTrigger와 rel 속성을 사용하는 jQuery를 작성하여 다른 항목을 토글합니다.jQuery로 작업 할 때 href = "#"을 사용해야합니까?

내가 가진 첫 번째 문제는 버튼 태그를 사용하면 열리고 즉시 닫힙니다. 앵커 태그를 사용하면 잘 작동합니다.

두 번째 문제는 페이지 아래로 스크롤하여 앵커 태그를 눌렀을 때 그 아래의 항목을 전환하면 href="#" 속성 때문에 페이지 상단으로 다시 이동한다는 것입니다.

나는 이것들이 newbie 문제가되어야한다는 것을 알고있다. 그러나 나는 단지 그들 주위에 어떻게 빠져 나갈지를 알 수 없다.

누군가 도와 줄 수 있습니까?

해야 내 HREF의 나는 toggleTrigger에 대한 <a> 태그를 사용하도록 강요 href="#divThatWillBeToggled"

암 같은 가리킨? <button> 태그를 사용할 수 없습니까?

편집 (내가 여기에 프로그래밍에 새로운 오전 실례)

<a href="#" class="toggleTrigger">This is my Toggle Trigger</a> 
<div class="toggle">This is info that is hidden and waiting to be toggled by the trigger</div> 
정보 숨겨진과 W3C에 의해 정의 된 href 속성 앵커 태그에 포함되어야합니다
+3

코드를 인용하면 좋은 대답을 얻을 확률이 크게 높아집니다. –

+1

'.toggleTrigger'는 플러그인입니까? 나는 아무것도 못 찾는다. 아니면 뭔가 다른 것을 의미 했습니까? 코드를 게시하십시오. –

답변

4

을 위해 무엇을 찾고있다이

href="javascript:" 

예를 들어 같은

+0

jQuery는 내가 아는 모든 것 때문에 찾고있는 것처럼 들리네 ... 내가 이것을 태그의 기본 동작을 멈추기 위해 사용한다면, 그 태그와 아무 관련이없는 태그에 펑키 동작을 유발할 것인가? 토글? – Stefan

+0

이것은 훌륭합니다. 버튼 태그에서도 잘 작동했습니다. 고맙습니다. – Stefan

5

전환 대기 표준. 그러나 href="#'을 사용할 필요는 없습니다. href="javascript:void(0)"을 사용할 수도 있습니다.

또한 표준을 신경 쓰지 않으면 href을 생략 할 수 있지만 커서가 일반 하이퍼 링크처럼 포인터로 변경되지는 않습니다. 앵커에서 CSS에 사용자 cursor:pointer이 필요합니다.

<a href="javascript:" id="myAnchorTagId">my anchor tag <a> 
+0

아, 확인해 보겠습니다. 미학적으로 말하자면 슬라이드를 토글 할 때 스크린이 튀어 나오게하는 것은 상당히 짜증이납니다. – Stefan

-1

쓰기 앵커 태그 당신은 그렇지 않으면 그것을 앵커의 "HREF"속성을 설정해야합니다 클릭 이벤트가 발생하지 않습니다. 당신이 원하는 경우 href="javascript:"를 사용하는 대신 #의

<a href="#">click me</a> 

<script> 
$(document).ready(function() { 
    $("a").click(function(e) { 
     e.preventDefault(); // prevent the default behavior (scrolling to the top) 
     // perform other code 
    }); 
}); 
</script> 
-1

: 스크롤 동작을 사용로 preventDefault를 중지하십시오.

1

... href = "#"속성으로 인해 페이지 상단으로 다시 이동합니다.

자바 스크립트를 통해 앵커에 클릭을 처리하는 경우, 이벤트 핸들러에 (링크를 따라한다)의 기본 동작을 취소 event.preventDefault(); 또는 return false; 중 하나를 사용하십시오.

JavaScript를 사용하지 않는 사용자가 페이지를 사용할 수 있도록 링크를 실제로 유용하게 링크하는 것이 가장 좋습니다. 이는 자바 스크립트가 합리적으로 필요한 웹 응용 프로그램과 달리 웹 페이지와 관련이 있습니다. 그것을 확인하고 발견되지 않으면 좋은 메시지를 보여줍니다). 그러므로 href="#" 대신 의미가없는   —을 가져 와서 처리기에서 event.preventDefault(); 또는 return false;을 사용하여 JavaScript로 재정의하십시오.

2

jQuery로 작업 할 때 href = "#"를 사용해야합니까?

아니요. 이것은 실례입니다. Build on things that work.

첫 번째 문제는 버튼 태그를 사용하면 열리고 즉시 닫힙니다. 앵커 태그를 사용하면 잘 작동합니다.

cancel the default action에게 아무 것도하지 않아서 양식을 제출하는 것처럼 들립니다. (또한 자바 스크립트와 같은 일을하지 않는 서버 측 대안 같은 소리, 그래서 당신은 progressive되는되지 않음)

두 번째 문제는 내가 페이지를 아래로 스크롤에 앵커 태그를 치면 그 밑으로 뭔가를 토글하면 href = "#"속성 때문에 페이지 상단으로 다시 이동합니다.

URL "#"은 "현재 페이지의 맨 위"를 의미합니다. JS가 실행 된 후 링크를 ​​따라하지 않으려면 위와 같이 기본 동작을 방지해야합니다.

는 HREF = 같은 내 href가 포인트

예 "#은 divThatWillBeToggled"한다. div는 기본적으로 CSS로 숨겨져 있지 않아야합니다 (JS에서는 즉시 숨길 수 있음). JS를 사용할 수없는 경우 표시됩니다.

toggleTrigger에 태그를 사용해야합니까? 나는 사용 태그를 사용할 수 없습니까?

HTML은 모두 태그에 대한 것입니다. 마지막 질문은 말이되지 않습니다.

+0

+1 좋은 답변입니다. 마지막 요점 : 답을보기 몇 분 전 편집을 참조하십시오. ''및 '

+0

기본 동작을 제거하면 "문제"가 해결되었습니다. 그러나 AJAX에 들어갈 수 있다면 단추 태그에서이 기본 동작을 제거하면 정보가 동적으로로드되지 않습니다. – Stefan

관련 문제