2012-01-23 6 views
3

버튼 (javascript)을 이와 같이 만드는 가장 좋은 방법은 무엇이며 올바른 태그는 무엇입니까? "a", "b"또는 다른 태그?어떤 태그를 자바 스크립트 버튼에 사용해야합니까?

예 - http://jsfiddle.net/S7FPH/

또는

<html> 
<head> 
<style type="text/css"> 
a.a_button, b.b_button { 
    margin: 10px; 
    background-color: green; 
    width: 100px; height: 20px; 
    text-align: center; 
    display: block; 
    color: yellow; 
} 
a.a_button {text-decoration: none;} 

b.b_button{ 
    cursor: pointer; 
    font-weight: 100; 
} 
</style> 

<script type="text/javascript"> 
    function test(){ 
     alert("test"); 
    } 
</script> 
</head> 
<body> 

<a class="a_button" href="" onclick="test(); return false;">click</a> 

<b class="b_button" onclick="test();">click</b> 

</body> 
</html> 

UPDATE :

Thats how it should look 사람들은 그렇게 여기, 내가 그것을 사용하는 방법에 의존하는 예이다 물었다.

"button"태그에 대해 - "button"태그를 내 예제 (디자인)와 유사하게 만드는 방법은 무엇입니까? "ul"에 대해 - 나는 그것을 좋아하지만이 방법으로 그것을 배치하는 방법을 모르겠다.

답변

5

쓰기 Unobtrusive JavaScript 및 사용

  • JS는
  • 작동 버튼을 제출하지 않을 경우 정기적 링크로 다시 떨어질 수있는 경우 링크 (<a href="fallback">…</a>) (<input type="submit"> 또는 <button type="submit">…</button>)에 JS 다시 사용 가능한 합리적인 가을이없는 경우
  • 기본 버튼 자바 스크립트 (<input type="button"> 또는 <button type="button">…</button>)와 DOM에 삽입 작동하지 않을 경우 다시 양식 제출에 떨어질 수있는 경우.

귀하의 단순화 된 사례는 귀하의 실제 사용 사례가 위의 내용 중 어떤 것이이주의 사항에 적용되는지를 판단하기에는 너무 이격되어 있습니다.

위의 모든 내용은 무료로 제공됩니다. 상호 작용하도록 설계되지 않은 요소를 사용하려면 tabindex (일부 구형 브라우저에서는 지원되지 않음)을 사용하여 집중력을 추가해야하며 집중력이 없으면 포인팅 장치 (예 : 마우스)를 사용해야 만 상호 작용할 수 있습니다. 선형 입력 장치 (예 : 키보드).

굵게 요소를 사용하지 마십시오. 그건 말도 안돼.

사람들은 내가 그것을 어떻게 사용하고 싶은지에 따라 달라 지므로 여기에 예제가 있습니다.

간단히 말해서 링크로 쉽게 넘어갈 수 있습니다. 북 마킹을 중단하지 않도록 pushState도 사용해야합니다.

"button"태그에 대해 - "button"태그를 내 예제 (디자인)와 유사하게 만드는 방법은 무엇입니까?

background-colourborder-style을 변경하십시오. "UL"에 대한

는 - 나는 그것을 좋아하지만 난 당신이 두 항목을 얻을 수 있도록하기 위해 그것을 분별 margin의 충분한 width과 함께이 방법

float의, 또는 display: inline-block을 배치하는 방법을 몰라 한 줄에

0

버튼이 앵커이므로 <a></a> 태그를 사용하십시오.

W3C 권장 사항은 양식의 각 버튼에 <input> 태그를 사용하는 것입니다.

Tag Input

0

그것은 당신이 순수 주의자의 정도의 문제이다.

커서를 무료로 가져 왔기 때문에 을 선호하지만 페이지를 다시로드하지 않으려면 onclick에서 false를 반환해야합니다. 두 경우 모두

, 당신은 대신 인라인의 헤드 온로드에서 온 클릭을 할당 할 수

당신이 버튼을해야하는 경우

, 일을 할 것입니다 입력 태그 버튼 태그가 너무

0

버튼이 무엇을해야하는지, 어떤 상황에서 긍정적 인 대답을 내릴지는 불가능합니다. 이 예제는 너무 추상적입니다.

그러나 ab은 구문 상으로는 아니지만 의미 상으로 잘못되었을 가능성이 큽니다. span을 사용하고 가능하면 class 속성을 사용하는 것이 좋습니다.

요소가 JavaScript 구동 버튼이되어야하고 다른 요소가 없다면 button 요소를 사용하지 않는 이유가 있을까요?

0

사용자 입력을 허용하는 요소를 찾고 새 URL로 이동하지 않고 button 태그를 사용해야합니다.

0

의미있는 href 태그가있는 a 태그를 제안합니다. 좋아하는 것 :

이렇게하면 사용자가 요소 위로 마우스를 가져 가서 클릭 할 때의 아이디어를 얻을 수 있습니다. 배경 이미지를 사용하는 경우 할 수있는 CSS 텍스트를 숨길 경우에도 작동합니다. 물론 기본 브라우저 동작을 억제하여 주소 표시 줄에 "#first"가 표시되지 않도록하고 브라우저가 "first"라는 ID를 가진 요소를 찾아서 점프하도록 할 수 있습니다.

a 태그를 사용하는 또 다른 이점은 키보드 탐색 기능을 사용하는 사용자가 차례대로 탭을 이동할 수 있다는 것입니다. 따라서 스타일 시트에 :focus 규칙을 포함하는 것을 잊지 마십시오.

관련 문제