2011-09-07 2 views
0

나는 점점 더 많은 웹 개발을하고 있으므로 다른 사람들의 페이지에서 마크 업을 보면서 많은 시간을 보냅니다. 내가 던져 버린 한 가지는 anchors 대 div를 사용하는 것입니다. Here is an example.HTML 마크 업 질문

그래서 나는 자바 스크립트 사용하거나 값으로 이동하는 URL을 포함 할 수 숨겨진 필드 사업부가 첫 번째 인스턴스에서이

<ul> 
    <li> 
     <div> 
      <input type="hidden" value="#"/> 
      div 
     </div> 
    </li> 
    <li> 
     <a href="#">anchor</a> 
    </li> 
</ul> 

같은 일부 마크 업을 가지고있다. 다음 방법은 앵커를 대신 사용하는 것과 동일한 것입니다.

li { 
    text-align:center; 
    padding-bottom:5px; 
} 
div, a { 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    padding:2px 5px; 
} 
div { 
    background: #aaa; 
    color:#fff; 
} 
div:hover { 
    cursor:pointer; 
} 
a{ 
    background: #777; 
    display:block; 
    text-decoration:none; 
    color:#fff; 
} 

내 자바 스크립트는 다음과 같습니다 :

내 CSS는 다음과 같다 내가 사업부와 첫 번째 경로에 대한 이동하고 설정하는 자바 스크립트를 사용하는 많은 페이지를 보았다

$(function() { 
    $('div, a').click(function(e) { 
     e.preventDefault(); 
     alert('clicked'); 
    }); 
}); 

숨겨진 필드를 통해 창 위치. 그 앵커의 스타일을 차단하도록 설정하면 정확합니까? 맞습니까?

또 다른 반쪽 관련 노트에서는 앵커 내부에 이미지를 중첩하여 이미지 링크를 만드는 대신 다른 접근 방식을 사용하기 시작했습니다. 블록을 앵커로 설정하고 너비와 높이를 설정 한 다음 배경 이미지를 설정합니다. 이 방법은 모든 브라우저에서 정확하고 안전합니까?

감사

일반적으로

답변

1

는 앵커과 같이, 페이지의 특정 부분에 브라우저 창을 이동하는 데 사용됩니다

http://www.example.com/#article-comments 

그래서, 하나의 앵커 태그에 대한 명확한 대상이 사용되어야한다.

한편

, 당신이 메일 버튼이있는 경우 : 당신은 자동으로 (이 수도 트리거 버튼을 URL로 이동하여 기대하지 않을거야

<div id="mail">Email</div> 

을,하지만 그건 안 일어날 것으로 예상되는 일). 앵커가 적합하지 않기 때문에 Gmail 인터페이스의 대부분의 버튼과 링크는 사실 <div>입니다.

+0

충분합니다. google이 그것을하는 경우에 정확해야한다, 맞은? ;) –

+1

테이블 레이아웃, FTW! 다음은 읽을만한 내용입니다. http://css-tricks.com/13780-when-and-when-not-to-use-an-anchor-tag/ – Blender

+0

감사합니다. 해당 게시물에 대한 의견은 훌륭했습니다. –