내가 둥지를 틀 수 있을까
나는 다음을하고있다 :
<a href="www.stackoverflow.com">
<button disabled="disabled" >ABC</button>
</a>
이것은 잘 작동하지만 "요소 '버튼'이 요소 '버튼'안에 중첩되어서는 안된다는 HTML5 유효성 검사 오류가 발생합니다.
누구든지 내가해야 할 일에 대해 조언을 줄 수 있습니까?
아니요 , W3C 의 HTML5 사양 문서 에 따르면 유효한 HTML5가 아닙니다 .
콘텐츠 모델 : 투명 하지만 대화 형 콘텐츠 하위 항목 이 없어야합니다 .
a 요소는 대화 형 내용이없는 한 (예 : 단추 또는 기타 링크) 전체 단락, 목록, 표 등 전체를 감싸고있을 수 있습니다.
즉, <a>
다음을 제외한 모든 요소를 중첩 할 수 있습니다 .
<a>
<audio>
( controls 속성이있는 경우)<button>
<details>
<embed>
<iframe>
<img>
( usemap 속성이있는 경우)<input>
( type 속성이 숨겨진 상태 가 아닌 경우 )<keygen>
<label>
<menu>
( type 속성이 툴바 상태 인 경우)<object>
( usemap 속성이있는 경우)<select>
<textarea>
<video>
( controls 속성이있는 경우)
어딘가에 연결되는 버튼을 사용하려는 경우 다음과 <form>
같이 해당 버튼을 태그 안에 넣습니다 .
<form style="display: inline" action="http://example.com/" method="get">
<button>Visit Website</button>
</form>
그러나 <button>
태그가 CSS를 사용하여 스타일이 지정되고 시스템 위젯처럼 보이지 않는 경우 ... 선호하는대로 <a>
태그에 대한 새 클래스를 만들고 같은 방식으로 스타일을 지정하십시오.
Bootstrap 3을 사용하는 경우 이것은 잘 작동합니다
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
방금 동일한 문제로 뛰어 들었고 'button'태그를 'span'태그로 대체하여 해결했습니다. 제 경우에는 부트 스트랩을 사용하고 있습니다. 이것은 다음과 같습니다
<a href="#register">
<span class="btn btn-default btn-lg">
Subscribe
</span>
</a>
아니.
다음 솔루션은 JavaScript를 사용합니다.
<button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button>
버튼을와 <form>
함께 기존 안에 배치하는 method="post"
경우 버튼에 속성이 있는지 확인하십시오. type="button"
그렇지 않으면 버튼이 POST 작업을 제출합니다. 이런 식 <form>
으로 GET과 POST 조작 버튼이 혼합 된 것을 가질 수 있습니다 .
그것이 유효하다면 정말 이상 할 것이고, 나는 그것이 유효하지 않을 것이라고 기대할 것입니다. 클릭 가능한 요소가 다른 클릭 가능한 요소 내에 있다는 것은 무슨 의미입니까? 버튼 또는 링크 중 어느 것입니까?
다른 옵션은 버튼의 onclick 속성을 사용하는 것입니다.
<button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button>
그러나 이것은 작동하지만 사용자는 링크가 요소 내부에있는 것처럼 링크 위에 표시되지 않습니다.
요즘 사양에서 허용하지 않더라도 <a href...><button ...></a>
태그에 FWIW ...
버튼에 클래스를 추가하고 일부 스크립트를 리디렉션 할 수 있습니다.
나는 이것을 이렇게한다 :
<button class='buttonClass'>button name</button>
<script>
$(".buttonClass').click(function(){
window.location.href = "http://stackoverflow.com";
});
</script>
왜 .. 당신은 버튼에 그림을 포함 할 수 있습니다
<FORM method = "POST" action = "https://stackoverflow.com">
<button type="submit" name="Submit">
<img src="img/Att_hack.png" alt="Text">
</button>
</FORM>
설명 및 작업 솔루션 : 방법 : onclick javascript가있는 다른 div 안에 onclick이있는 div
내부 클릭 핸들러에서이 스크립트를 실행하여
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
HTML5에서 링크 내에 버튼 요소를 포함시키는 것은 불법입니다.
기본 및 : active (pressed) 상태에서 CSS를 사용하는 것이 좋습니다.
body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */
a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none}
a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF}
a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF}
<p><a class="Button" href="www.stackoverflow.com">Click me<a>
귀하의 자바 스크립트 솔루션을 시도하지만 작업을 위해 e.preventDefault();
자바 스크립트 함수에 삽입해야 합니다.
<!-- Add your HTML !-->
<a id="id_primary_link" href="my_primary_link.php">
<button onclick="my_trick_function('my_secondary_link.php')">
</a>
<!-- Add your javascript function !-->
<script>
function my_trick_function(secondary_link){
$('#id_primary_link').click(function(e) {
e.preventDefault();
window.location.replace(secondary_link);
});
}
</script>
버튼 안에 formaction 속성 사용
추신! 버튼 type = "submit"인 경우에만 작동합니다.
<button type="submit" formaction="www.youraddress.com">Submit</button>
<a href="index.html">
<button type="button">Submit</button>
</a>
<button type="submit" onclick="myFunction()">Submit</button>
<script>
function myFunction() {
var w = window.open(file:///E:/Aditya%20panchal/index.html);
}
</script>
참고 URL : https://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside-an-a-using-html5
'programing tip' 카테고리의 다른 글
RVM 설치 중 "gpg : command not found"오류를 해결하는 방법? (0) | 2020.07.03 |
---|---|
Visual C ++ 2010 Express를 사용하여 64 비트 응용 프로그램을 컴파일하는 방법은 무엇입니까? (0) | 2020.07.03 |
PHP에서 is_null ($ x) vs $ x === null (0) | 2020.07.02 |
JAR 내에 JAR을 포함하는 클래스 경로 (0) | 2020.07.02 |
반응 형 이미지 맵 (0) | 2020.07.02 |